如何理解MVVM原理

一、什么是MVVM？

MVVM是Model-View-ViewModel的简写

• Model：数据模型层，用来处理业务逻辑和与数据库交互
• View：视图层，DOM
• ViewModel：视图模型层，用来处理Model层和View层的交互

在MVVM框架中，将View层的状态和行为抽象化，视图 UI 和业务逻辑分开，ViewModel层通过双向绑定，把View层和Model层联系起来。ViewModel会自动的来处理这些事情

二、MVVM的优点

MVVM模式和MVC模式一样，目的是分离视图（View）和模型（Model） ，所以，它的优点有以下几个：

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

三、MVVM的原理

上面说了， ViewModel层通过双向数据绑定将View层和Model层连接了起来，从而使View层和Model层能够自动同步。
实现数据绑定的做法有大致如下几种：

• 脏值检查（angular.js）
• 数据劫持（vue.js）
• 发布者-订阅者模式（backbone.js）

MVVM和Vue

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性。

View通过View-Model的DOM Listeners将事件绑定到Model 上，而Model则通过Data Bindings来管理View中的数据，View-Model从中起到一个连接的作用
Vue中VM的实现原理：

• 响应式：Object.defineProperty()来做数据劫持和响应式
• 模板解析：Vue中的render函数，来将模版转换成虚拟DOM
• 将虚拟DOM渲染成html：通过updateComponent方法实现

五、参考文章

1、MVVM框架理解及其原理实现
2、MVVM 百度百科
3、MVVM模式理解