MVC,MVP,MVVM是三种常见的前端架构模式，通过分离关注点来改进代码组织方式。MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view都是相同的，不同的是MV之间的桥梁连接部分。
本文是对https://www.kancloud.cn/lixianshengdezhanghao/interview/904696的一个总结。
一、MVC
- 视图（View）：用户界面，只负责渲染 HTML
- 控制器（Controller）：业务逻辑，负责调度 model 和 view
- 模型（Model）：数据保存，只负责存储数据、请求数据、更新数据
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图View进行更新。
接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受输入，传递给 Controller。另一种是直接通过controller接受指令。此处只画了第一种情况。
二、MVP
MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。
与MVC最大的区别就是View和Model层完全解耦，不在有依赖关系，而是通过Presenter做桥梁，用于操作view层发出的事件传递到presenter层中，presenter层去操作model层，并且将数据返回给view层，整个过程中view层和model层完全没有联系。
三、MVVM
MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。唯一的区别是，它采用双向绑定（data-binding），View的变动，自动反映在 ViewModel，反之亦然。
这里我们拿典型的MVVM模式的代表，Vue，来举例：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})这里的html部分相当于View层，可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素，当ViewModel对Model进行更新时，通过数据绑定更新到View。
Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化。
整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提高代码的可重用性。
本段出自https://www.kancloud.cn/lixianshengdezhanghao/interview/904696
