vue深入响应式原理

一.追踪变化：
当一个普通的对象设置入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被多次触发只会推进一次队列中