深入理解前端架构 MVVM和MVC_mvvm,mvc前端框架

深入理解前端架构：MVVM 与 MVC

在前端开发中，MVVM（Model-View-ViewModel）和MVC（Model-View-Controller）是两种常见的架构模式，用于组织和管理前端应用的结构。

MVVM架构模式（双向通讯）

MVVM（Model-View-ViewModel）是一种在前端开发中广泛使用的架构模式，它旨在实现数据驱动的界面和更加可维护的代码结构。它由三个部分组成:模型（Model）、视图（View）和ViewModel（视图模型）。MVVM通过引入ViewModel层，实现了视图（UI）和模型（数据及业务逻辑）之间的解耦，同时利用双向数据绑定机制确保它们保持同步。

Model（模型）

• 负责应用程序的数据和业务逻辑。
• 与后端通信，获取和保存数据。

例子

// 存放后端返回的数据和前端数据结构
data() {
  return {
    currentId: '', // 当前部门的ID
    departmentList: [], // 部门列表数据
    isEdit:false // 是否处于编辑状态
  };
},
1
2
3
4
5
6
7
8

在Vue.js中，数据模型往往分散在组件的 data 选项中，通过这些数据来驱动视图的显示和交互。
data选项用于定义组件的数据（Model），可以将其视为模型（Model）的一部分。例如这段代码，data 中包含了一些组件需要用到的数据，比如 currentId、departmentList、isEdit。这些数据用于渲染组件的内容和状态，以便在视图中正确显示和更新。

View（视图）

• 用户界面的呈现层，展示数据给用户。
• 不包含应用程序的业务逻辑。

例子

<el-tree
  :data="departmentList"
  :props="defaultProps"
  default-expand-all
  :expand-on-click-node="false"
>
  <!-- el-tree 中的部分视图结构 -->
</el-tree>
1
2
3
4
5
6
7
8

这里使用了element-ui的 el-tree组件，它负责展示部门的层级结构，显示在页面上的树形视图。这部分构成了页面的主要内容展示，属于视图层(View)

页面效果

ViewModel（视图模型）

• 连接视图和模型的中介层，是连接View和Model的桥梁。
• 包含视图所需的业务逻辑，处理用户输入。
• 通常包含可观察的属性，当这些属性发生变化时，通知视图更新。

例子

computed: {
  // 计算属性
  fullMessage() {
    return this.message + ' ' + this.userInput;
  },
},
methods: {
  // 方法
  // 从后端获取部门数据
  async department() {
    // ...
    //后端数据 → 视图
  },
  // 触发弹出对话框、编辑部门或删除部门等操作
  handleCommand(value, id) {
    // ...
  },
  // 校验完成向服务器发送请求
  submitForm()() {
    // ...
    // 按钮、输入框的数据 → 后端服务器
  },
},

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Vue 实例的 methods和 computed 中的一些方法和事件处理逻辑组成视图模型（ViewModel）的一部分
VM有两个方向
一、将Model转换成View，也就是将后端传递的数据(Model)转换成视图(View)。(数据绑定)
二、将View转换成Model，也就是将看到的页面(View)转换成后端的数据(Model)。(DOM时间监听)
这样就是实现了数据的双向绑定。

MVVM强调数据绑定，通过双向绑定确保模型和视图的同步。
通过ViewModel，当数据(Model)变化，视图(View)会自动更新。用户在视图(View)中的交互也会自动更新数据(Model)。

案例总结

以Vue为例,MVVM各部分组成为

1. Model（模型）
   模型代表应用程序的数据和业务逻辑。在 Vue.js 中，模型通常由数据对象（data 选项）和后端服务（例如 API 请求）组成。数据对象包括应用程序状态的定义，以及对数据的操作方法。
2. View（视图）
   视图是用户界面的呈现，负责展示模型中的数据。在前端开发中，视图通常由 HTML、CSS 和用户交互元素（如表单、按钮等）组成。视图层与模型层保持解耦，通过数据绑定等方式实现双向绑定，确保视图能够反映模型的变化。
3. ViewModel（视图模型）
   视图模型是连接模型和视图的桥梁。它负责将模型中的数据适配成视图所需的形式，并处理用户在视图上的交互，然后将这些交互反映回模型。在 Vue.js 中，视图模型主要由 Vue 实例的 data、computed、methods 等选项组成。

Vue.js 和 Knockout.js 是MVVM架构的代表性实现。
这些工具提供了响应式数据绑定、指令和组件等功能，使开发者更容易构建可维护、可扩展的前端应用。

MVC架构模式（单向通讯）

MVC（Model-View-Controller）是一种常见的前端架构模式，它将应用程序分为三个主要组成部分：模型（Model）、视图（View）和控制器（Controller）。这种模式旨在提高代码的可维护性、可扩展性和可重用性。模型和视图通讯通过控制器进行单向通讯。

MVC和MVVM其实区别不大,MVC中的C(Controller)演变成了MVVM中的VM(ViewModel)。VM并不是完全取代了C,只是在MVC的基础上增加了一层VM，弱化了C的概念。

Model（模型）

• 模型是应用程序的数据层，负责处理数据的存储、检索和修改。
• 它通常包括与数据交互的逻辑、数据验证和状态管理。
• 模型不直接处理用户界面或用户输入，而是通过控制器与视图进行通信。

View（视图）

• 视图是用户界面的表示，负责展示数据和向用户呈现信息。
• 视图通常是被动的，它接收来自模型的数据并将其呈现给用户，同时通- 过控制器接收用户输入。
• 视图不处理业务逻辑，它仅仅展示和渲染数据。

Controller（ 控制器）

• 控制器是用户输入和视图之间的中介，负责处理用户输入并更新模型和视图。
• 它包括处理用户行为、验证输入、更新模型的逻辑等。
• 控制器从视图接收用户输入，然后根据输入更新模型，并通知视图刷新以反映模型的变化。

MVC强调的是单向通讯，用户与视图交互通过控制器进行，而模型与视图之间的通讯通过控制器进行。这样的分离使得每个组件的责任清晰，但也增加了组件之间的耦合度，因为控制器需要知道视图和模型的具体实现。

MVVM与MVC的异同

相同点

1. 分离关注点： MVVM和MVC都采用了分离关注点的设计原则，将应用程序划分为不同的组件，每个组件负责不同的责任。
2. 模型驱动视图： 在两种模式中，模型负责管理应用程序的数据和业务逻辑，而视图负责显示数据。
3. 提高可维护性： 两者都旨在提高代码的可维护性、可扩展性和可重用性，使得开发者能够更容易地组织和管理代码。

不同点

1. 双向数据绑定： MVVM引入了双向数据绑定机制，通过ViewModel将视图和模型连接起来，实现数据的自动同步。而在MVC中，数据的同步需要通过控制器手动管理。
2. 关注点的不同： MVVM将重点放在了数据的绑定和处理上，视图和模型的同步是自动的。而MVC更加注重用户输入和控制器的作用，控制器负责处理用户输入和更新模型。
3. 框架的不同： MVVM通常使用现代的前端框架，如Vue.js、Angular等，它们提供了双向数据绑定的能力。MVC则可以使用传统的后端MVC框架，也可以在前端使用一些库，但不一定提供双向数据绑定。
4. 耦合度的不同： MVVM中视图和模型之间的耦合度较低，因为ViewModel充当了中介，而且数据绑定是自动处理的。而在MVC中，控制器需要显式地更新视图，增加了组件之间的耦合。

选择

在选择使用MVVM还是MVC时，可以根据具体的项目需求、团队经验和技术栈来进行选择。MVVM适用于需要大量数据绑定和复杂交互的场景，而MVC适用于简单的项目或者需要更灵活控制视图更新的场景。