#Vue.nextTick 原理

#1. 面试题

Q: Vue 的 nextTick 是干什么用的？原理是什么？是宏任务还是微任务？

#2. 核心解答

Vue 的 DOM 更新是异步的。

#(1) 为什么需要 nextTick？

当你 this.text = 'new' 时，Vue 不会理解更新 DOM，而是开启一个异步队列。 它会把同一事件循环中的所有数据变更合并，只执行一次 DOM 更新（性能优化）。 问题：如果你修改数据后立刻 document.querySelector，拿到的是旧 DOM。 解决：nextTick(cb) 等待 DOM 更新完后再执行回调。

#(2) 实现原理

Vue 内部维护一个 callbacks 数组。 优先使用微任务 (Microtask) 来执行这些 callback，因为微任务在当前宏任务结束后立刻执行，UI 渲染更及时。

降级策略 (Vue 2)：

1. Promise.then (微任务) -> 首选。
2. MutationObserver (微任务)。
3. setImmediate (宏任务) -> IE/Node。
4. setTimeout (宏任务) -> 最后的保底。

Vue 3：不再考虑兼容 IE，直接统一使用 Promise (微任务)。

#3. 应用场景

1. 操作 DOM：修改数据后，需要获取更新后的 DOM 尺寸/状态（如 ScrollTop）。
2. 组件生命周期：在 created 钩子中如果想操作 DOM（虽然不推荐），必须包裹在 nextTick 里，因为此时 DOM 还没挂载。