Vue之nextTick工作原理与作用

Vue 作为目前最为主流的前端 MVVM 框架之一，在熟练使用的基础上，去深入理解其实现原理是非常有意义的一件事情。

vue中的nextTick的工作原来

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 Watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。

下面是 $nextTick 方法的大致执行过程

当调用 this.$nextTick(callback) 时，Vue 会将 callback 函数添加到一个称为“更新队列”（Update Queue）的数组中。

Vue 会检查是否已经有一个异步任务正在进行中。如果没有，它会创建一个微任务，该微任务将在当前代码执行完成后执行。

当前代码执行完成并进入微任务队列时，Vue 将开始处理更新队列中的回调函数。

在处理更新队列时，Vue 会执行所有在该更新循环中触发的数据变更操作，并将这些变更应用到虚拟 DOM

完成虚拟 DOM 的更新后，Vue 会触发一个“flush”阶段，此时更新队列中的回调函数会被依次执行。

回调函数在执行时，DOM 已经更新完成，可以在回调函数中获取到更新后的 DOM

通过这样的异步处理方式，Vue 在下次 DOM 更新循环结束后执行 $nextTick 的回调函数，确保在回调函数内部能够获取到最新的 DOM 数据。

注意：Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

使用 $nextTick 的常见场景是在更新数据后，立即获取更新后的 DOM 元素的状态，例如计算 DOM 元素的尺寸或位置。另一个常见用例是在修改数据后，执行某些依赖于更新后的数据的操作，确保在 DOM 更新完成后执行这些操作。

vue2和vue3中的$nextTick的区别

在vue2中$nextTick是一个全局函数，可以直接通过 this.$nextTickcallback() 调用。具体使用如下：

this.$nextTick(()=>{// 在 DOM 更新后执行的回调函数});

在vue3中$nextTick不再作为VUE实例的方法，而是一个独立的函数，需要使用时导入。此外nextTick返回的是一个Promise对象。因此，我们不仅可以通过传入函数处理回调，还可以通过 .then() 来处理回调：

// Vue 3 中的 nextTickimport{ nextTick}from'vue';nextTick(()=>{// 在 DOM 更新后执行的回调函数})nextTick().then(()=>{// 在 DOM 更新后执行的回调函数});// 或使用异步函数和 awaitasyncfunctionsomeFunction(){// ...修改数据awaitnextTick();// 在 DOM 更新后执行的回调函数}

总结：

Vue 3 中的 $nextTick 与 Vue 2 中的 $nextTick 在功能上基本一致，都用于在下次 DOM 更新循环结束后执行回调函数。然而，Vue 3 中的 $nextTick 被作为一个独立的函数导入，并返回一个 Promise 对象，而不再作为 Vue 实例的方法。这样的改变使得代码更加清晰，并且能够更好地与现代 JavaScript 中的 Promise 和异步函数结合使用。