Vue的异步更新队列$nextTick()用法

要理解Vue的异步更新队列需要先理解JavaScript的运行机制。

JavaScript的运行机制如下:

Js的任务分为同步任务和异步任务；

1、所有的同步任务都在主线程上执行；

2、除了主线程之外还有一个任务队列；所有的异步任务都在任务队列中排队执行；当主线程上的所有同步任务执行完毕之后，系统才会到任务队列中依此读取任务队列中的异步任务。

3、主线程依此循环执行

Vue异步更新队列

Vue在观察数据变化时并不是直接更新DOM，而是开启一个队列，并缓存同一个事件循环中发生的所有数据改变。在缓存时会除去重复数据，从而避免不必要的计算和DOM操作。然后，在下一个事件循环tick中，Vue刷新队列并执行实际（已去重）的工作。

使用异步更新队列

Vue提供了$ nextTick来告知DOM声明时候完成更新

文章资料源于查看《vue.js实战》