目录
一、如何追踪变化:
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官网。