3个 Vue nextTick 原理的关键点

大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员👨🏻‍💻，关注我，科技未来或许我能帮到你！

我们都知道，Vue nextTick 的作用，就是确保在 DOM 更新完成后再执行某些操作，比如：读取 DOM 的最新状态 或 进行依赖 DOM 的逻辑处理。

那它背后的工作原理，你知道吗？

下面大澈带你，针对 nextTick 工作原理的 3 个关键点，展开聊一聊！

一、异步DOM更新

这一点算是一个前提条件。

由于 Vue 在响应式数据变化时，会进行异步的 DOM 更新，所以直接修改数据后，DOM 并不会立即反映出变化。

此时，我们可以在这个异步 DOM 更新等待的时机中，去做一些事情，比如：调用 nextTick 方法。

二、回调队列

在 nextTick 的实现中，会把传入的回调函数存入一个队列中。

如果在同一轮更新中多次调用 nextTick，所有的回调会在同一个异步任务中依次执行，保证只触发一次 DOM 更新。

三、异步任务调度

为了确保在 DOM 更新完成后立即执行回调，Vue 会选择尽可能快的异步任务机制。

常见的实现策略有：Promise、MutationObserver、setTimeout。

在 nextTick 的实现中，是利用 Promise.resolve().then() 来创建微任务。因为微任务在当前执行栈清空后就会执行，能更快地响应 DOM 变化。

其它两种实现方式，速度略慢，只是作为备选方案。

好了，今天要分享的内容就是这么多，联系和更多内容在绿色App搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~