MVVM及Vue双向绑定原理

参考 此篇MVVM

什么是MVVM?

MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型。
【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。

它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

总的来说，MVVM就是把视图和模型关联的一种模式。

Vue如何实现双向绑定

Vue就是基于MVVM模式实现的一套框架，在vue中：Model:指的是js中的数据，如对象，数组等等。View:指的是页面视图。viewModel:指的是vue实例化对象。

Vue实现双向绑定：1、模板的编译 2、数据劫持（观察数据变化） 3、watcher（关联模板编译和数据变化过程）

从图中可以看出，当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能。另一方面，Vue 的指令编译器Compile 对元素节点的指令进行解析，初始化视图，并订阅Watcher 来更新视图， 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。

当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

因为VUE使用Object.defineProperty方法来做数据绑定，而这个方法又无法通过兼容性处理，所以Vue 不支持 IE8 以及更低版本浏览器。

另外，vue初始化实例时， 有一个proxy代理方法，它的作用就是遍历data中的属性，把它代理到vm的实例上，这也就是我们可以这样调用属性：vm.aaa等于vm.data.aaa。

Vue双向绑定原理（数据劫持+发布订阅）

Vuejs在实例化的过程中，会对实例化对象选项中的data进行遍历，遍历其所有属性并使用Object.defineProperty把这些属性全部转为getter、setter。同时每一个实例对象都有watcher实例对象，他会在模板编译的过程中，用getter访问data的属性，watcher就会把用到的data属性记为依赖，这样就建立了视图与数据之间的联系。 之后我们渲染视图的数据依赖发生变化（即数据的setter被调用）的时候，watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图重新渲染。这样就实现了数据对于视图的驱动。

通俗的讲，双向绑定就是当数据发生变化时，用户界面发生相应的变化，开发者不需要手动修改DOM。