10 分钟了解 nextTick，并实现简易版的 nextTick

一、什么是 nextTick

????????nextTick 是一个用于在 DOM 更新完成后执行回调函数的方法。在 Vue.js 或其他类似框架中，当我们修改了数据后，DOM 并不会立即更新，而是会进入一个队列中，然后在下一个 tick 执行更新。nextTick 提供了一种方式，使我们能够在 DOM 更新完成后执行一些操作，例如获取更新后的 DOM 元素。

二、实现原理

????????nextTick 的实现原理涉及到 JavaScript 的事件循环机制。当我们调用 nextTick 方法时，它会将传入的回调函数放入一个队列中，然后通过宏任务（如 setTimeout）或微任务（如 Promise）的方式，在下一个事件循环中执行这个队列中的回调函数。这样可以确保回调函数在 DOM 更新完成后执行。

三、使用场景

????????nextTick 的常见用途包括：

• 在 DOM 更新后执行某些操作，例如获取更新后的元素尺寸、位置等。
• 在更新后触发某些异步操作，例如发送请求、执行动画等。
• 在修改数据后立即访问更新后的数据。

四、如何实现一个简易版的 nextTick

下面是一个简易版的 nextTick 实现示例：

const callbacks = []
let pending = false

function nextTick(callback) {
  callbacks.push(callback)

  if (!pending) {
    pending = true
    Promise.resolve().then(flushCallbacks)
  }
}

function flushCallbacks() {
  pending = false
  const copies = callbacks.slice(0)
  callbacks.length = 0

  for (let i = 0; i < copies.length; i++) {
    copies[i]()
  }
}

????????上述代码中，我们使用一个数组 callbacks 来保存回调函数，使用一个标志位 pending 来表示是否有回调函数待执行。当调用 nextTick 方法时，将回调函数放入 callbacks 数组，并检查 pending 标志位。如果没有回调函数待执行，则将 pending 置为 true，并通过 Promise 的方式在下一个事件循环中执行 flushCallbacks 函数。

flushCallbacks 函数会将 pending 重置为 false，并将 callbacks 数组的副本 copies 保存起来。然后遍历 copies 数组，依次执行回调函数。

五、注意事项

• nextTick 回调函数的执行顺序是根据它们被放入队列的顺序来决定的。
• 如果在同一个 tick 中多次调用 nextTick，它们的回调函数会被合并成一个队列，并在下一个 tick 中执行。
• nextTick 是异步执行的，不会阻塞代码的执行。