一、简介

MVC，MVP和MVVM都是常见的软件架构设计模式（Architectural Pattern），它通过分离关注点来改进代码的组织方式。不同于设计模式（Design Pattern），只是为了解决一类问题而总结出的抽象方法，一种架构模式往往使用了多种设计模式。

• 目标都是解耦，解耦好处一个是关注点分离，提升代码可维护和可读性，并且提升代码复用性。

• 都将应用抽象分离成视图、逻辑、数据3层。

MVC

MVC将应用抽象为数据层（Model）、视图（View）、逻辑（Controller） ，这样数据、视图、逻辑的代码各自汇聚。各层之间的通信模式则没有严格限制，在实际开发中也有各种实现，有这样的：

也有这样的

也有这样的

虽然MVC对各个层之间的通信方式没有限定，但有一点可以确定的是，在MVC模式中，Model和View可能有耦合，即MVC仅仅将应用抽象，并未限制数据流。

MVP

MVP则在MVC基础上，限定了通信方式，即Model和View之间不直接通信，都通过Presenter通信，这个Presenter和MVC中的Controller一脉相承，代表应用中的逻辑层。Presenter负责项目中的逻辑，并且直接与View和Model通信，操作数据更新更新后手动同步到View上。

MVP模式限制了Model和View之间通信，让Model和View解耦更彻底，代码更容易被复用。

MVP模式也有问题，它的问题在于Presenter的负担很重，Presenter需要知道View和Model的结构，并且在Model变化时候需要手动操作View，增加编码负担，降低代码维护性。

MVVM

于是MVVM设计了VM层，即ViewModel层，ViewModel自动同步数据到视图，用VM代替P之后，MVVM自动从Model映射到View（实现方式是模板渲染），不需要用户手动操作视图，这样代码更简单不易出错，代码更好阅读和维护。

从上面对MVC、MVP、MVVM的描述可以看出，它们是递进关系，不断优化的：MVC中Model和View还有一定程度的耦合，而在MVP和MVVM中View和Model彻底分离，View和Model不知道彼此的存在，View和Model只向外暴露方法让Presenter调用；MVVM通过自动同步数据更新到视图，解决了MVP中手动同步的痛点，简化了代码。

Vue MVVM的实现

参考了MVVM思想，通过改进VM，将VM实现了视图（View）跟数据（Model）的双向数据绑定，即数据驱动

上图中View和Model进行通信，有两条线

• Data Bindings：数据绑定，Model中的数据发生变化，Vue就将变化映射到页面上，

• DOM Listensers：DOM监听，一旦用户对页面进行操作，比如点击按钮，填写数据，Vue就将这种变化，映射到Model

二、总结

MVC、MVP和MVVM之间的区别是什么？

MVC将应用抽象为数据层（Model）、视图层（View）、逻辑层（controller），降低了项目耦合。但MVC并未限制数据流，Model和View之间可以通信。

MVP则限制了Model和View的交互都要通过Presenter，这样对Model和View解耦，提升项目维护性和模块复用性。

而MVVM是对MVP的P的改造，用VM替换P，将很多手动的数据=>视图的同步操作自动化，降低了代码复杂度，提升可维护性。