Vue 响应式原理

将data与dom绑定的原理

首先引用官网的一张图



要将data与dom绑定，首先要满足一下几点

1、Vue实例内预先定义了data（及时该值为”“也要预先定义）

2、使用Vue.set(object, key, value)或者vm.$set(object, key, value)方法设置了data

因为Vue实例创建的时候，Vue将遍历data内的所有对象并使用 Object.defineProperty 把这些属性全部转为 getter/setter。当data的属性值被改变，会触发对应的setter方法，通知watcher重新计算，所有关联的组件就会被更新。

ps:如果Vue实例内data的对象是个数组，进行添加和删除数组的内容不会触发setter更新组件，因为新旧数据指向同一个地址。此时可以创建一个新的对象重新赋值就能触发。

Vue异步更新队列

Vue 异步执行 DOM 更新需要注意以下几点：

1、当更新数据后，Vue将开启一个队列，并且同一个watcher多次触发，只会进入队列一次。

2、当更新数据后，下一行代码使用vm.$nextTick(function(){})，当更新dom成功后，会执行这个回调函数。