MVC，MVP 和 MVVM 的区别

秒速五厘米 2021-09-14 13:04 350阅读 0赞

[MVC][]（Model-View-Controller）是最常见的软件架构之一，业界有着广泛应用。它本身[很容易理解][Link 1]，但是要讲清楚，它与衍生的 MVP 和 MVVM 架构的区别就不容易了。

## 一、MVC ##

MVC模式的意思是，软件可以分成三个部分。

![20171229112920453][]

*  视图（View）：用户界面。
 *  控制器（Controller）：业务逻辑
 *  模型（Model）：数据保存

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

MVC使用非常广泛，比如JavaEE中的SSH框架（Struts/Spring/Hibernate），Struts（View, STL）-Spring（Controller, Ioc、Spring MVC）-Hibernate（Model, ORM）以及ASP.NET中的ASP.NET MVC框架，xxx.cshtml-xxxcontroller-xxxmodel。（实际上后端开发过程中是v-c-m-c-v，v和m并没有关系，下图仅代表经典的mvc模型）

![20171229113042503][]

1.  View 传送指令到 Controller
2.  Controller 完成业务逻辑后，要求 Model 改变状态
3.  Model 将新的数据发送到 View，用户得到反馈

所有通信都是单向的。

## 二、MVP ##

MVP是把MVC中的Controller换成了Presenter（呈现），目的就是为了完全切断View跟Model之间的联系，由Presenter充当桥梁，做到View-Model之间通信的完全隔离。

![20171229115038565][]

1. 各部分之间的通信，都是双向的。

2. View 与 Model 不发生联系，都通过 Presenter 传递。

3. View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

## 三、MVVM ##

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。vue.js、angular都采用这种模式。

![20171229115319271][]

参考资料：

http://www.ruanyifeng.com/blog/2015/02/mvcmvp\_mvvm.html

[MVC]: http://zh.wikipedia.org/wiki/MVC
[Link 1]: http://www.ruanyifeng.com/blog/2007/11/mvc.html
[20171229112920453]: /images/20210813/0e8058648f6047e9815a5e901b934a1b.png
[20171229113042503]: /images/20210813/1f17f08cfa00417b92b87627c8e0f478.png
[20171229115038565]: /images/20210813/00a9c3aaf82a43f0966c2ffaa7493f04.png
[20171229115319271]: /images/20210813/70e63f21d14d4ca29526d142188d17e4.png