博客

通过 nextTick 方法，我们可以确保通过 nextTick 注册的回调函数在 DOM 更新完成之后执行，这样，我们就可以在回调函数中获取并操作更新完成的 DOM。这里需要重点关注的点是 “DOM 更新完成之后”，

DOM 到底什么时候更新完成

？Vue 中 DOM 的更新机制是什么？这些前置的知识点都需要在解析 nextTick 方法源码之前先搞清楚，只有这样我们才能理解 nextTick 方法的源码

Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列,

并将 flushSchedulerQueue 函数放到任务队列中

。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。然后在下一次事件循环中，Vue 会触发数组中所有 Watcher 实例的组件重新渲染机制，然后清空数组。

我们知道了，能够触发执行组件重新渲染的 flushSchedulerQueue 函数借助 nextTick 方法被放置到了任务队列中。这样我们使用nextTick（callback）的时候，也会把这个回掉函数放到对列中去执行，这样也就实现了数据一更新后，立马去执行我们的这个回调函数，拿到已经渲染好的数据。