Vue深入响应式的原理

目录

一、如何追踪变化：

二、检测变化的注意选项：

三、声明响应式property：

四、异步更新队列：

---

一、如何追踪变化：

1. 把普通的JS对象传入Vue实例作为对data选项，Vue将遍历此对象所有的Property。并使用Object.defineProperty把这些property全部转为getter/setter。

2. getter/setter在内部让Vue能够追踪依赖，在property被访问和修改时通知更变。

3. 每个组建实例都对应一个watcher实例，在组建渲染过程中把“接触”过的数据property记为依赖。当依赖的setter触发时会通知watcher,从而使它关联的组件重新渲染。

二、检测变化的注意选项：

1. Vue不能检测对象和数组的变化。

2. Vue不允许动态添加跟级别的响应式property。

但是可以使用

Vue.set（vm.someObject,"b",2）; this.$set(this.someObject,"b",2);

3.为已有对象赋值多个新property。用原对象与要混合进去的对象的peoperty一起创建新对象。

this.someObject = Object.assign({},this.someObject,{a:1,b:2})

4.Vue不能检测一下数组的变动。

（1）利用索引设置数组值。

vm.items[indexOfItem] = new Value;

(2)修改数组长度。

vm.items.length = newLength;

解决第一类问题：

vm.set(vm.items,indexOfItem,newValue);

vm.items.splice(infrxOfItem,1,newValue)

解决第二类问题：

vm.items.splice(newLength);

三、声明响应式property：

 Vue不允许动态添加根级响应property。必须在初始化实例前声明所有根级响应式property。

四、异步更新队列：

1. Vue在更新DOM时是异步执行的。

2. 只要侦听到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

3.同一个watcher被多次触发，只会被推入到队列中一次。

4.Vue在内部对异步队列尝试使用原生的Promise.then,MutationObserver和setImmediate setTimeOut(fn,0);

 

---

注：参考资料：Vue官网。