MVC模式与MVVM模式

MVC：
MVC 即 Model-View-Controller 的缩写，就是 模型—视图—控制器，也就是说一个标准的Web 应用程式是由这三部分组成的：

View 用来把数据以某种方式呈现给用户
Model 其实就是数据
Controller 接收并处理来自用户的请求，并将数据返回给用户

View一般通过Controller来和Model进行联系。
Controller是Model和View的协调者,View和Model不直接联系。基本都是单向联系。

缺点：
大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

MVVM：
MVVM是Model-View-ViewModel的缩写。MVVM的设计原理本质是基于MVC的，核心是 ViewModel。ViewModel中的DOM Listeners和Data Bindings是实现数据双向绑定的关键，DOM Listeners监听页面所有view层中的dom元素，当发生变化时，model层的数据随之变化，Data Bindings会监听model层的数据，当数据发生变化时，view层的dom元素也随之变化

Vue.js 就是一个利用MVVM模式的 Javascript 库，是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Model 层代表数据模型，它仅仅关注数据本身（数据）
View 显示页面，将数据渲染进DOM，当ViewModel对Model进行更新的时候，会通过数据绑定更新到View（视图）
ViewModel 是业务逻辑层，其中的一大核心就是数据绑定（一切js可视业务逻辑，比如表单按钮提交等业务逻辑），也是一个同步View 和 Model的对象（桥梁），也是实现数据双向绑定的关键。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

MVVM优点
MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

1. 低耦合。视图（View）可以独立于Model变化和修改。一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发，设计人员可以专注于页面设计
4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写。

MVC与MVVM的区别：
MVC中Controller演变成MVVM中的ViewModel
MVVM通过数据来显示视图层而不是操作dom
MVVM解决了MVC中大量的dom操作使页面渲染性能降低，加载速度变慢，影响用户体验等问题。