谈谈你对 nextTick 的理解

1. NextTick 是什么

nextTick 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取更新后的 DOM。

我们可以理解为：Vue 在更新 DOM 时是异步执行的。当数据发生变化，Vue 将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新。

2. 为什么要有 nextTick

举个例子：

{{ num }}

for (let i = 0; i < 100000; i++) {
  num = i
}

如果没有 nextTick 更新机制，那么 num 每次更新值都会触发视图更新（上面这段代码会更新 10 万次视图）；有了 nextTick 机制，只需要更新一次。所以 nextTick 本质上是一种优化策略。

3. 使用场景

如果想要在修改数据后立刻得到更新后的 DOM 结构，可以使用 Vue.nextTick()：

第一个参数：回调函数（可以获取最新的 DOM 结构）。
第二个参数：执行函数上下文。

// 修改数据
vm.message = '修改后的值'
// DOM 还没有更新
console.log(vm.$el.textContent) // 原始的值

Vue.nextTick(function () {
  // DOM 更新了
  console.log(vm.$el.textContent) // 修改后的值
})

组件内使用 vm.$nextTick() 实例方法只需要通过 this.$nextTick()，回调函数中的 this 将自动绑定到当前的 Vue 实例上：

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'

this.$nextTick(function () {
  console.log(this.$el.textContent) // => '修改后的值'
})

$nextTick() 会返回一个 Promise 对象，可以用 async/await 完成相同作用的事情：

this.message = '修改后的值'
console.log(this.$el.textContent) // => '原始的值'

await this.$nextTick()
console.log(this.$el.textContent) // => '修改后的值'

4. 实现原理

把回调函数放入 callbacks 等待执行。
将执行函数放到微任务或者宏任务中。
事件循环到了微任务或者宏任务，执行函数依次执行 callbacks 中的回调。

Vue 2 中优先使用微任务（Promise.then / MutationObserver），降级方案是宏任务（setImmediate / setTimeout）。Vue 3 中则直接使用 Promise.resolve().then() 或者 queueMicrotask。