Vue.nextTick()笔记

在 Vue 中，当你修改了响应式数据后，无论是使用 Vue.nextTick() 的回调，还是使用 Promise.resolve().then() 的回调，通常都能够拿到更新后的 DOM。

这涉及到 Vue 的异步更新队列 机制和 JavaScript 的事件循环（Event Loop） 。

Vue 为了提高性能，并避免不必要的 DOM 操作，它并不会在数据发生变化时立即更新 DOM。相反，它会：

JavaScript 的事件循环是其异步执行模型的核心。它将任务分为两种：

宏任务（Macrotasks）： 例如 setTimeout、setInterval、setImmediate (Node.js)、I/O 操作、UI 渲染等。
微任务（Microtasks）： 例如 Promise 的回调 (.then()、.catch()、.finally())、MutationObserver 的回调、process.nextTick (Node.js) 等。

事件循环的执行顺序大致是：

关键点： 微任务总是在当前宏任务执行完毕后，下一个宏任务开始之前被执行。

Vue.nextTick() 的设计目的就是为了在 Vue 完成了所有 DOM 更新后执行回调。

内部机制： Vue 内部会尝试使用最高效的异步方式来触发 nextTick 的回调。在支持 Promise 的现代浏览器中，它会优先使用 Promise.then() 来创建微任务。如果不支持 Promise（或在某些特殊情况下），它会降级使用 MutationObserver（也是微任务），最后降级到 setTimeout(0)（宏任务）。
保证： 无论内部使用哪种方式，nextTick 都会确保它的回调函数在 Vue 完成了本次所有响应式数据对应的 DOM 更新之后才执行。这意味着当你进入 nextTick 的回调时，DOM 已经是最新的了。

Promise.resolve().then() 显式地创建了一个微任务，并将你的回调函数放入微任务队列。

执行时机： 当你在修改响应式数据后立即调用 Promise.resolve().then() 时：
1. 你修改数据，Vue 将 DOM 更新任务放入其内部的微任务队列。
2. 你调用 Promise.resolve().then()，将你的回调函数放入微任务队列。
3. 当前同步代码执行完毕。
4. 事件循环开始处理微任务队列。
5. Vue 的 DOM 更新微任务通常会先于你手动创建的 Promise.then() 微任务被处理。 这是因为 Vue 的更新队列是内部管理和优化的，它会在当前事件循环的微任务阶段尽早被清空。
6. 当 Vue 的 DOM 更新完成，并清空了其内部的微任务后，你的 Promise.then() 回调才会得到执行。

Vue.nextTick()： 它是 Vue 官方提供的 API，专门用于等待 DOM 更新。它内部机制确保了回调在 DOM 更新后执行。
Promise.resolve().then()： 它创建了一个微任务。由于 Vue 的 DOM 更新也是在微任务阶段完成的，并且通常在其他普通微任务之前被处理，所以当你的 Promise.then() 回调执行时，DOM 也已经更新完毕。

简单来说：

Vue 的 DOM 更新和 Promise.then() 都发生在同一个"微任务阶段"。Vue 的更新任务通常会优先或在同一批次中被处理掉，所以当你的 Promise.then() 回调被执行时，DOM 已经是最新的了。

尽管 Promise.resolve().then() 在大多数情况下也能达到目的，但强烈推荐使用 Vue.nextTick() 。

原因：

语义明确： nextTick 明确表达了你的意图是等待 Vue 的 DOM 更新，代码可读性更好。
兼容性与健壮性： nextTick 是 Vue 内部机制的一部分，它会处理不同环境（如浏览器兼容性、Node.js 服务端渲染等）下的最佳异步策略，确保在所有情况下都能正确工作。而直接使用 Promise.then() 可能在某些边缘情况下或特定环境中行为不一致（尽管这种情况很少见）。
官方推荐： 它是 Vue 提供的官方 API，意味着其行为是稳定和有保障的。

所以，当你需要访问更新后的 DOM 时，请始终优先考虑使用 this.$nextTick(() => { /* 访问更新后的 DOM */ }) 或在 setup 语法中使用 nextTick(() => { /* 访问更新后的 DOM */ })。