Vue.js的异步更新队列

Vue.js为什么使用异步更新队列

在vue.js2.0开始使用虚拟DOM进行渲染，变化侦测的通知只发送到组件，组件内所有的状态变化都会通知到同一个watcher,然后虚拟DOM会对整个组件进行对比（diff）也就是说如果在同一轮事件循环中有两个数据发生变换，那么组件的watcher会收到两份变化的通知，从而进行两次的渲染但事实hvue并不会进行两次渲染，虚拟DOM会对整个组件进行渲染，所以等所有的状态都修改完毕后，一次性将整个DOM渲染到最新.

实现方式：

vue.js的实现方式是将收到的watcher实例添加到队列中缓存起来，并且在添加到队列之前检查其中是否已存在相同的watcher,只有在不存在时，才将watcher实例添加到队列中。然后在下一次的事件循环中，vue会让队列中的watcher触发渲染流程并清空事件队列。这样就可以保证即使在同一事件循环中有两个状态变化，watcher最后也只执行一次渲染。

以上内容抄录自深入浅出 vue.js