vue 数据双向绑定 原理

回答一

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

1. vue会遍历此data中对象所有的属性
2. 并使用Object.defineProperty把这些属性全部转为gettter/setter
3. 而每个组件实例都有watcher对象
4. 会在组件渲染过程中把属性记录为依赖
5. 当依赖项的setter被调用时，会通知watcher重新计算，从而使它关联的组件得以更新

回答二（推荐）

1. 在生命周期的 initState 方法中将 data、prop、method、computed、watch中的数据劫持，通过 observe方法与Object.defineProperty方法将相关对象转换为Observer对象。
2. 然后在initRender方法中解析模版，通过Watcher对象，Dep对象与观察者模式将模板中的 指令与对象的数据建立依赖关系，使用全局对象Dep.target实现依赖收集。
3. 当数据变化时，setter被调用，触发Object.defineProperty方法中的dep.notify方法，遍历该数据依赖列表，执行器update方法通知Watcher进行视图更新。

vue是无法检测到对象属性的添加和删除，但是可以使用全局Vue.set方法（或vm. $set实例方法）。
vue无法检测利用索引设置数组，但是可以使用全局Vue.set方法（或vm. $set实例方法）。
无法检测直接修改数组长度，但是可以使用splice