Vue渲染采用异步更新队列，数据变更后不立即更新DOM，而是批量处理；nextTick在DOM更新后、下个事件循环前执行，依赖微任务机制确保获取最新DOM。
Vue 的渲染不是“改完数据立刻重绘”，而是把多次数据变更攒在一起，等同步代码跑完再统一更新 DOM。nextTick 就是让你精准卡在这个更新完成后的时刻去执行逻辑。
异步渲染队列怎么工作的
当你修改响应式数据（比如 ref 或 data 里的属性），Vue 不会马上操作 DOM，而是把对应的更新任务推入一个内部异步队列。这个队列在当前同步任务全部执行完毕后，才被清空并触发一次批量 DOM 更新。
- 连续赋值 5 次 count，只触发 1 次视图更新，避免重复计算和渲染
- 队列清空前的所有变更都会合并处理，保证视图最终状态与数据一致
- 这个机制默认启用，无法关闭，是 Vue 性能优化的核心设计之一
NextTick 为什么总能拿到新 DOM
nextTick 的回调被安排在 DOM 更新之后、下一个事件循环开始之前执行。它不靠轮询或定时器，而是借力 JavaScript 原生的微任务机制。
- Vue 优先用 Promise.then（微任务），确保回调在 DOM 更新后立即执行
- 降级方案依次为 MutationObserver、setImmediate、setTimeout
- 所有调用 nextTick 的回调会被收集到同一个队列，在同一批 flush 中依次执行
哪些地方必须用 nextTick
不是所有 DOM 操作都需要它，但以下情况不用就容易取到旧节点或报错：
立即学习“前端免费学习笔记（深入）”；
- v-if 切换后立即获取元素尺寸或位置（如 getBoundingClientRect()）
- 动态插入 v-for 列表项后，想对新增的 DOM 元素做 focus 或 scrollIntoView
- 在 created 钩子中操作 DOM（此时模板还没挂载，需等 mounted 或 nextTick）
- 手动触发 $forceUpdate 后，需要确认视图已刷新再继续流程
Vue 2 和 Vue 3 的差异点
底层逻辑一致，但 API 和默认行为略有不同：
- Vue 2 提供 this.$nextTick() 实例方法，也支持全局 Vue.nextTick()
- Vue 3 的 nextTick() 是具名导出函数，返回 Promise，可直接 await
- Vue 3 在 SSR 环境中 nextTick 会退化为同步执行（服务端无事件循环）
- 两者都保证：同一 microtask 阶段内，DOM 更新一定先于 nextTick 回调执行
