Vue.js MVC框架和MVVM框架有什么不同？

看了一圈帖子，其实我感觉就2个词——拆分和改进。

以下是个人理解，打个容易理解的比喻：

在MVC框架中：

M——后台数据池：即后端数据库，并提供接口给前端调用；

V——HTML页面：即用户所看到界面，如一个input框用户可以输入信息；一个链接用户可以点击跳转

C——JS代码：即我们在js文件中写的业务逻辑，如何处理用户的操作？

1. View→Control：解析用户操作行为，转化为代码；
2. Control(parse...)：写业务逻辑处理数据，准备好后台需要的数据；
3. Control→Model：前端发送请求给后台；
4. Model→Control：后台接受数据后更新数据库返回给前端；
5. Control(parse...)：写业务逻辑处理数据；
6. Control→View：操作DOM数据，页面同步reflow、repaint重排重绘。

这个过程Control控制器干的活多到爆表，而且我们要写很多代码管理数据，除此之外还要频繁操作DOM，触发页面重排重绘，比较浪费性能。

---

在MVVM框架下：

M——还是后台数据池

V——还是HTML页面

VM——变成从Control抽象并分离出来的对象

那么Control去干嘛了？他去管理路由了，地位突降。想想我们之前在Control里面写这么多业务逻辑，如果还要实现一个无刷新路由跳转工作量太大了。

现在看VM好像干了MVC中Control的活，我认为也确实如此，甚至这还是一个强化版的Control，为什么这么说？

在Vue中：

• 通过 Object.defineProperty / Proxy 函数获得操作底层“权限”，原来 obj.xxx = xxx 本来只是一个对象属性简单的赋值，现在不但赋值，还可以在赋值之前操作dom，最重要的是这对开发者来说是vue自动化完成的，开发者们几乎不用去写js操作dom了。即所谓的响应式 / 双向数据绑定（视图与数据一起动）
• 在VM中提供了data，methods，computed等属性还有各种生命周期钩子函数，对于管理代码逻辑更清晰。好像这就是所谓的“分布式”管理，说白了就是划一为多，方便管理，但是也负面增加不同模块间的通信接口数量；
• VM本质是一个类DOM的虚拟对象，所有的dom操作先在VM对象上模拟，操作完毕后再把VM的数据同步给真正的DOM，即DOM更新只用关心最后的结果，这样就不会频繁的触发reflow、repaint了，最大化利用的浏览器性能
• 路由管理分给Control控制器去做，现在VM+Control配合实现了无刷新跳转，节省了网络请求的开销。

---

归根结底，不管是MVC还是MVVM都是为了把M和V分开，这其实和”html负责结构、css负责样式、js负责行为和逻辑“的道理很类似。MVVM的框架把Control的功能切分更模块化，仔细想想真不是强化版Control吗？只是它抽象成了一个很牛逼对象，我们只用对这个对象操作，就可以轻松实现页面级操作。