Vue小结(一): vue数据驱动模型

Vuejs的数据驱动是通过MVVM框架来实现的。

MVVM框架主要包含3个部分: model、view和 viewmodel。

Model: 指的是数据部分，对应到前端就是javascript对象

View: 指的是视图部分，对应前端就是dom

Viewmodel: 就是连接视图与数据的中间件, 即观察者

其中,数据和视图不能直接通信:

View —— (事件触发) Dom Listeners —— Model ;
Model —— (数据变化) Data Bindings —— View ;

首先，vuejs在实例化的过程中，会对遍历传给实例化对象选项中的data 选项，遍历其所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

同时,每一个实例对象都有一个watcher实例对象，在模板编译的过程中,用getter去访问data的属性，watcher此时就会把用到的data属性记为依赖，这样就建立了视图与数据之间的联系。
当渲染视图的数据依赖发生改变（即数据的setter被调用）触发notify，watcher比较到前后两个的数值发生变化，会通知视图进行重新渲染。

这样就实现了所谓的数据对于视图的驱动。