MVC、MVP和MWVM是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化开发效率。

在开发单页面应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，如果项目变得复杂，那么整个文件就会变得冗长、混乱，这样对项目开发和后期的项目维护是非常不利的。
 

MVC

MVC通过分离 Model、View 和 Controller 的方式来组织代码结构。

其中

• View负责页面的显示逻辑。
• Model负责存储页面的业务数据，以及对相应数据的操作。并且View和Model应用了观察者模式，当Model层发生改变的时候它会通知有关View层更新页面。
• Controller层是View层和Model层的纽带，它主要负责用户与应用的响应操作。

 根据上图可以了解到，当用户与页面产生交互的时候，Controller中的事件触发器就开始工作了，通过调用Model层，来完成对Model的修改，然后Model层再去通知View层更新。

MVC框架的缺点：

MVC 框架的大部分逻辑都集中在 Controller 层，代码量也都集中在 Controller 层，这带给 Controller 层很大的压力，而已经有独立处理事件能力的 View 层却没有用到。

为了解决以上问题，MVP 框架被提出来。

MVP框架

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

• MVC 框架的大部分逻辑都集中在 Controller 层，代码量也都集中在 Controller 层，这带给 Controller 层很大的压力，而已经有独立处理事件能力的 View 层却没有用到。
• 还有一个问题，就是 Controller 层和 View 层之间是一一对应的，断绝了 View 层复用的可能，因而产生了很多冗余代码。
• 各个部分之间的通信，都是双向的；
• View 和 Model 不发生联系，都通过 Presenter 传递；
• View 非常薄，不部署任何业务逻辑，即没有任何主动性。Presenter 非常厚，所有逻辑都部署在那

 在 MVC 框架中，View 层可以通过访问 Model 层来更新，但在 MVP 框架中，View 层不能再直接访问 Model 层，必须通过 Presenter 层提供的接口，然后 Presenter 层再去访问 Model 层。

缺点：

View 层与 Model 层确实互不干涉，View 层也自由了很多。但还是有问题，因为 View 层和 Model 层都需经过 Presenter 层，致使 Presenter 层比较复杂，维护起来会有一定的问题。而且因为没有绑定数据，所有数据都需要 Presenter 层进行“手动同步”，代码量比较大，虽然比 MVC 模型好很多，但也是有比较多的冗余部分。

为了让 View 层和 Model 的数据始终保持一致，避免同步，MVVM 框架出现了。

MVVM 框架

MVVM分为Model、View、ViewModel

Model：代表数据模型，数据和业务逻辑都在Model层中定义;

View：代表UI视图，负责数据的展示;

ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作;

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。
这种模式实现了Model和View的数据自动同步，因此开发者只需要专注于数据的维护操作即可，而不需要自己操作DOM。

参考：

MVC、MVP、MVVM的区别和联系 - 掘金

MVVM、MVC、MVP架构对比 - 掘金