浅析Vue源码中的nextTick：微任务队列与组件更新时机

从一次“诡异”的DOM操作说起

很多Vue开发者都遇到过这样的场景：在修改了响应式数据之后，立刻去读取DOM，发现拿到的还是旧值。比如：

this.message = 'hello';
console.log(this.$el.textContent); // 仍然是旧内容

这并非Bug，而是Vue刻意设计的异步更新机制。为了性能，Vue不会在每次数据变化时都立即触发组件重新渲染，而是将更新操作放入一个队列，在同一个事件循环的微任务中批量执行。而`nextTick`，正是我们与这个异步队列“同步”的桥梁。理解它的实现，不仅能解释上述现象，更能让我们精准把握组件更新的时机。

nextTick 的核心：微任务与回调队列

`nextTick`的本质是把回调函数推迟到当前同步代码执行完毕后、DOM更新完成之后执行。Vue内部维护了一个`callbacks`数组和一个`pending`标志。调用`nextTick(cb)`时，会把回调推入`callbacks`，并判断是否已经有一个微任务（或宏任务）被安排去执行`flushCallbacks`。如果还没有，就调用`timerFunc`，它会优先选择微任务方案。

在Vue 2中，`timerFunc`的降级策略非常经典：优先使用`Promise.then`，如果不支持则用`MutationObserver`，再不行就退回到`setImmediate`或`setTimeout`。到了Vue 3，由于现代浏览器普遍支持Promise，Vue直接使用`Promise.resolve().then(flushCallbacks)`，不再做复杂降级。无论哪种方式，目的都是让`flushCallbacks`在当前宏任务结束后的微任务队列中尽快执行，而不是等到下一个宏任务。

`flushCallbacks`会复制一份`callbacks`数组并清空原数组，然后依次执行每个回调。这样做是为了防止在回调中再次调用`nextTick`导致死循环。所有回调共享同一个微任务时机，因此它们的执行顺序就是加入队列的顺序。

组件更新：另一个被推入队列的任务

组件更新同样依赖这个机制。当响应式数据变化时，会触发依赖的`Watcher`（Vue 2）或`effect`（Vue 3）重新运行。但渲染Watcher不会立即重新渲染，而是通过`queueWatcher`被加入一个调度队列。随后，Vue会调用`nextTick(flushSchedulerQueue)`，把“刷新调度队列”这个任务也放入`callbacks`中。

关键点来了：`flushSchedulerQueue`会按顺序执行所有待更新的Watcher，完成DOM的重新渲染。而用户通过`nextTick`注册的回调，通常是在数据变化之后才加入`callbacks`的。因此，在同一个微任务中，`flushSchedulerQueue`会先于用户回调执行。这就保证了当我们的回调被调用时，DOM已经更新完毕。

但有一种情况需要留意：如果在数据变化之前就调用了`nextTick(cb)`，那么`cb`会先于`flushSchedulerQueue`加入队列，导致回调执行时DOM尚未更新。这也是为什么官方文档建议：在修改数据后使用`nextTick`来等待DOM更新。

从源码看“更新时机”的边界

理解了上述流程，就能回答一些常见疑问：

- 为什么`nextTick`返回Promise？ Vue 2.1.0+ 和 Vue 3 都支持`this.$nextTick().then(...)`，因为它内部如果没有传入回调，就返回一个Promise，方便使用`async/await`。
- 多个`nextTick`回调会合并执行吗？ 会。它们都在同一个微任务中按顺序执行，不会产生额外的渲染。
- 在`nextTick`中再次修改数据会怎样？ 会触发新一轮的更新，但当前微任务中的回调队列已经复制并清空，新回调会被安排到下一个微任务中执行。

值得注意的是，Vue 3的`nextTick`实现更加简洁，直接返回一个Promise，并且组件的更新调度也使用了`queueJob`和微任务。整体思想与Vue 2一脉相承，只是去掉了历史包袱。

总结：异步是手段，时机是目的

`nextTick`并不是什么黑魔法，它只是Vue异步更新策略的一个对外接口。微任务队列的选择让回调尽可能早地执行，同时又能等到同一轮数据变化引发的所有DOM更新完成。作为开发者，我们不需要手动操作微任务，但理解`nextTick`与组件更新的先后关系，能帮助我们在操作DOM、获取布局信息或集成第三方库时避免踩坑。下一次当你在数据变化后需要读取DOM，不妨先`await this.$nextTick()`，让Vue的更新节奏与你的代码同步。