计算机基础——MVVM和MVC的区别和详解

MVVM和MVC——区别和详解

一、MVC（Model-View-Controller）

• view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。
• view传送指令到controller，controller完成业务逻辑后，要求model改变状态，Model将新的数据发送到View，用户得到反馈

解析：

• 模型（Model）：复制数据管理和业务逻辑。表示应用程序中的数据结构以及对数据的操作

• 试图（View）：负责用户界面的展示和呈现，通常是用户可以看到和至于交互的部分

• 控制器（Controller）：负责接收用户的输入并作出响应，处理用户与模型和视图之间的交互。

  控制器将用户的操作转发给模型进行处理，并将模型的结果传递给视图进行展示。

优点：

• 能将应用程序的各个功能模块分离开来，提高代码的可维护性和可扩展性
• 明确定义各个组件的职责，开发人员能更好的组织和管理代码，同时使代码更容易复用

二、MVVM（Model-View-ViewModel）

• View视图层、Model数据层、ViewModel视图数据层。各部分通信都是双向的，采用双向数据绑定。
• vue参考了MVVM，但不完全是。

解析：

• 模型（Model）：负责数据管理和业务逻辑
• 视图（View）：负责用户界面的展示和呈现
• 视图模型（ViewModel）：连接模型和视图的桥梁。视图模型负责获取和处理模型中数据，并未视图提供数据绑定所需的属性和命令。它将模型中的数据转换为视图可以使用的形式，同时也接收来自视图的用户输入并将其转发给模型进行处理

优点：

• 解决了MVC中大量DOM操作使页面渲染性能降低，加载速度变慢的问题
• 实现了view和model的自动同步：当Mdoel的属性改变时，我们不用自己手动操作DOM元素来改变view的显示，它会自动变化

三、MVC和MVVM的区别：

• 在MVC里，view是可以直接访问Model的，所以View里会包含Model信息以及一些业务逻辑
• MVC模型关注的是Model的不变，所以在MVC模型里，Model不依赖于View，但是View依赖于Model

---

• MVVM在概念上真正将页面与数据逻辑分离的模式
• 将数据绑定工作放到一个JS里去实现，而这个js文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上
• 双向绑定，方便去同时维护页面上都依赖于某个字段的N个区域，而不用手动更新它们

总结：

MVVM并不是用ViewModel完全取代了controller，mvvm只能算是mvc的升级版，viewModel存在目的在于抽离controller中展示的业务逻辑，而不是替代controller，其他视图操作业务等还是应该放在controller中实现