vue基础教学（8）

一、 sync的使用 vue2的响应式原理

原理：通过数据劫持 defineProperty + 发布订阅者模式，当 vue 实例初始化后 observer 会针对实例中的 data 中的每一个属性进行劫持并通过 defineProperty() 设置值后在 get() 中向发布者添加该属性的订阅者，这里在编译模板时就会初始化每一属性的 watcher，在数据发生更新后调用 set 时会通知发布者 notify 通知对应的订阅者做出数据更新，同时将新的数据根性到视图上显示。
缺陷：只能够监听初始化实例中的 data 数据，动态添加值不能响应，要使用对应的 Vue.set()。

1.第一步：对数据做数据劫持：
1.1对象类型做数据劫持
使用 Object.defineProperty 方法添加对象，重写了原有的 get 和 set 方法，这就是数据劫持。
defineRective 文件通过封装 Object.defineProperty 方法，把浅层次的对象中的某个数据变成具有 get 和 set 方法的属性。因为有闭包的存在，所以不需要临时变量进行周转了。
接下来是深层次：用递归侦测对象的全部属性

八个 JS 文件互相调用(文件代码，放在文章下方)：
index.js：入口文件
observe.js：用于判断某一属性是否为对象或者数组，因为 typeof(array) 返回的也是 object，算是一个局限性。普通数据就直接 return，对象(数组)就给它调用 new Observer
Observer.js：对传入的属性做类型判断，然后分别转化为可被监测的属性。
def.js：为属性添加 ob 属性，做标记，而且可以通过