一.追踪变化:
当一个普通的对象设置入data时,vue会遍历该对象,使用Object.defineProperty,把对象的属性设置getter/setter,每个组件实例对应一个watcher实例,当触发依赖项的setter,触发对应的watcher,从而使得它的组件重新渲染。
二.检测变化的注意事项
1.对象:无法监控对象的属性的新增和删除,解决:
this.$set(this.obj,key,value),
Object.assign(),
{...}扩展运算符
2.数组:
无法设置数组的某个项的值:this.items[index]=newValue;
无法修改数组的长度this.items.length=1;
解决
this.$set(this.items,index,value);
this.items.splice(index,1,newValue)
三.vue不允许动态添加根响应式属性,所以必须初始化数据的时候,声明所有的根响应属性
四.异步队列,vue更新DOM是异步的,监听到数据变化就会开启一个新的队列,同一个watcher被多次触发只会推进一次队列中