vue 设计模式之MVC、MVP和MVVM三种设计模式的异同

原文地址：https://segmentfault.com/a/1190000021818631
MVC、MVVM、MVP是常见的设计模式，也是常见的设计思想，那它们之间有什么区别呢？接下来对它们进行简要的归纳总结

三种模式的介绍

1.MVC：经典设计模式

MVC全名为Model View Controller ，是模型（Model）- 视图（View）- 控制器（Controller）的缩写。他是1970年代被引入到软件设计大众的。MVC模式致力于关注点的切分，这意味着model和controller的逻辑是不与用户界面（View）挂钩的。因此，维护和测试程序变得更加简单容易。
[图片上传失败...(image-98e8bd-1630660921001)]

• Model层：模型（用于封装业务逻辑相关的数据以及对数据的操纵）
• View层：视图（渲染图形化界面，也就是所谓的UI界面）
• Controller层：控制器（M和V之间的连接器，主要处理业务逻辑，包括显示数据，界面跳转，管理页面生命周期等）

**标准MVC工作模式： **当有用户的行为触发操作时，控制器（Controller）更新模型，并通知视图（V）和模型（M）更新，这时视图（V）就会向模型（M）请求新的数据，这就是标准MVC模式下Model，View 和 Controller 之间的协作方式。

MVC优点：

1. 耦合性低，视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码；
2. 重用性高；
3. 生命周期成本低；
4. MVC使开发和维护用户接口的技术含量降低；
5. 可维护性高，分离视图层和业务逻辑层也使得WEB应用更易于维护和修改；
6. 部署快。

MVC缺点：

1. 不适合小型，中等规模的应用程序，花费大量时间将MVC应用到规模并不是很大的应用程序通常会得不偿失。
2. 视图与控制器间过于紧密连接，视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。
3. 视图对模型数据的低效率访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

2.MVP:MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

MVP全名为Model View Presenter ，是由MVC演变而来，它和MVC的相同之处在于：Controller / Presente都是负责业务逻辑，Model管理数据，View负责显示。不过在MVP中View并不直接与Model交互，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，即使用 Presenter 对视图和模型进行了解耦，让它们彼此都对对方一无所知，沟通都通过 Presenter 进行。
[图片上传失败...(image-ef95e0-1630660921001)]

• Model层：模型（用于封装业务逻辑相关的数据以及对数据的操纵）
• View层：视图（渲染图形化界面，也就是所谓的UI界面）
• Presenter层：控制器（M和V之间的连接器，主要处理业务逻辑，包括显示数据，界面跳转，管理页面生命周期等）

**标准MVP工作模式: **在 MVP 中，Presenter 可以理解为松散的控制器，其中包含了视图的 UI 业务逻辑，所有从视图发出的事件，都会通过代理给 Presenter 进行处理；同时，Presenter 也通过视图暴露的接口与其进行通信。

MVP特点：

1. M、V、P之间双向通信。
2. View 与 Model 不通信，都通过 Presenter 传递。Presenter完全把Model和View进行了分离，主要的程序逻辑在Presenter里实现。
3. View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
4. Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，从而使得在变更View时候可以保持Presenter的不变，这样就可以重用。不仅如此，还可以编写测试用的View，模拟用户的各种操作，从而实现对Presenter的测试–从而不需要使用自动化的测试工具。

MVP优点：

1. 模型与视图完全分离，我们可以修改视图而不影响模型；
2. 可以更高效地使用模型，因为所有的交互都发生在一个地方——Presenter内部；
3. 我们可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁；
4. 如果我们把逻辑放在Presenter中，那么我们就可以脱离用户接口来测试这些逻辑（单元测试）。

MVP缺点：视图和Presenter的交互会过于频繁，使得他们的联系过于紧密。也就是说，一旦视图变更了，presenter也要变更。

3.MVVM

MVVM全名为Model View ViewModel。这个模式提供对View和View Model的双向数据绑定。这使得View Model的状态改变可以自动传递给View。典型的情况是，View Model通过使用obsever模式（观察者模式）来将View Model的变化通知给model。
[图片上传失败...(image-dc3ca7-1630660921001)]

• Model层：Model层代表了描述业务逻辑和数据的一系列类的集合。它也定义了数据修改和操作的业务规则。
• View层：View代表了UI组件，像CSS，JQuery，html等。他只负责展示从Presenter接收到的数据。也就是把模型转化成UI。
• View Model层：View Model负责暴漏方法，命令，其他属性来操作VIew的状态，组装model作为View动作的结果，并且触发view自己的事件。

MVVM模式关键点：

1. 用户和View交互。
2. View和ViewModel是多对一关系。意味着一个ViewModel只映射多个View。
3. View持有ViewModel的引用，但是ViewModel没有任何View的信息。
4. View 和ViewModel之间有双向数据绑定关系。

MVVM优点：

1. 低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。
4. 可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写。

三种模式的区别

MVC 是世界上最低级、最原始的 UI 模式；MVC 就是在 V 上绑定 M，然后 C 负责处理界面整个提交请求，并且一遍遍地刷新整个 V。这种机制。所以 MVC 的标志是“初级、单向绑定、一遍遍刷新UI”。

MVP 则是深入到程序的“骨髓”，UI设计模板与 MVP 事件定义绑定，让程序员可以捕获这么一个组件的丰富的事件，然后在事件处理过程中又去从控件树上去直接访问其它所有控件，直接修改其属性。开发的精力很大程度上用在学习各种控件的内部机制上，学习曲线陡峭。所以MVP的标志是“复杂、事件驱动、精细到每一个控件层次”。

MVVM 则是在 MVP 上的改进，它隔离了控件操作层，UI 模板上各种控件直接跟 VM 层的属性绑定，使得 VM 属性改变时自动更新 UI 控件，反之 UI 控件的值改变时又自动更新 VM 属性。这样编程的方式就不是去一大堆控件事件处理，而是写少量的 VM 属性更改行为代码。开发精力绝大部分都放在业务与UI的绑定上，而并不需要研究控件内部机制。

三种设计模式的应用

1.MVC模式。

React使用的是MVC模式。所有MVC框架都是单向数据流的。
特色：

• 使用Virtual DOM
• 提供了响应式(Reactive) 和组件化 (Composable) 的视图组件。
• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

注：react 实际上是一个“伪MVC”，它其实是 MVP 的，但是它深知 MVP 模式的弊病，它明明是基于组件并且绑定了组件的 change 事件的，但是它有使用虚拟DOM的方式来一遍遍刷新UI控件（并且为了解决性能问题，有各种负责和诡异的避免全局刷新UI树的反模式操作）。所以虽然 React 自称为 MVC模式，但是实际上它是 MVP 的变种。

2.MVP模式。

JQuery 是非常经典的 MVP 编程模式

3.MVVM模式。

Knockout、AngularJS、Vue 等可以看作是 MVVM 模式

Angular使用的MVVM模式。当触发UI事件，ajax请求或者 timeout 延迟，会触发脏检查。这时会调用watch函数，最后把所有的变化全部更新，调用apply()方法把新的数据渲染到页面上。
优点：一次检测会收集所有的数据变化，然后统一更新UI，大大减少了操作 DOM 的次数。
缺点：只要有ui或ajax或settimeout操作时就会进行检查，且当watcher之间相互影响的时候，更会触发多次$digest循环，这样watcher一多，就会很影响性能。

注：AngularJS 其实在 MVVM 上做的不是很好，倾向于 MVP。只有 Knockout 是实现了经典的 MVVM 设计模式，而且有几个性能相关的特性（例如自动延迟 UI 刷新、自动抽稀无用的 UI 刷新操作）可以将性能提高（相对于其它许多 web 前端框架）至少几十倍。

Vue一定意义上算是React和Angular的集大成者。它吸取了MVVM的数据管理思想，同时应用了React的virtual Dom算法。它使用了双向数据绑定来满足开发的便捷，但是它不同组件之间又使用单向数据流，来保证数据的可控性。它使用了很多Angular的指令语法，但是它革新了Angular的脏数据检查机制，使用数据劫持的方法来触法数据检查机制。它借鉴了React的组件化思想，大大增加了前端工程的结构规范化。

注：Vue 内部使用了 Object.defineProperty() 来实现双向绑定，通过这个函数可以监听到 set 和 get 的事件。

总结

MVC 只是把控件跟 M 绑定，一遍遍刷新 UI。而 MVP 则是把控件跟事件单向绑定，它的假设是程序员最爱写低级的代码来操作控件。而 MVVM 则是把控件跟 VM 双向绑定，它的假设是交互界面设计时最爱写高层次一些的声明来操作用户业务行为上的变化。