跳到主要内容

实现nextTick

· 阅读需 1 分钟
素明诚
素明诚
Full stack development

为什么会有$nextTick​

因为Vue是异步更新DOM的，数据改变就会开启异步更新队列，等待队列中所有数据变化完成后再统一更新，这样做可以减少不必要的DOM操作。

如何实现一个$nextTick​

Vue 的 $nextTick ，用于在下次 DOM 更新循环结束之后执行延迟回调。它的实现主要是利用了 JavaScript 引擎的微任务机制，通过在当前任务结束后，把回调函数加入到微任务队列，实现了下次 DOM 更新循环结束之后再执行回调函数的效果。

Vue.prototype.$nextTick = function (fn) {
  // 将回调函数加入到 Promise 队列
  Promise.resolve().then(fn);
};

该代码的实现原理是：在 JavaScript 中，Promise 是一个微任务，当当前任务结束后，它会被添加到微任务队列，并在下一轮微任务中执行。因此，通过在 $nextTick 函数中调用 Promise.resolve().then(fn)，可以实现在下一次微任务中执行 fn 回调函数的效果。