Vue响应式更新采用异步批量机制，nextTick在microtask阶段执行，确保回调在DOM更新完成、浏览器重绘前运行；它利用事件循环微任务顺序，精准卡点于Vue内部flushSchedulerQueue之后，使开发者能安全访问最新DOM。
Vue 的响应式更新不是“改完数据立刻重绘 DOM”，而是把更新任务攒起来，等合适的时机批量执行。这个“攒任务”的过程靠异步更新队列，而 nextTick 就是让你能精准踩在 DOM 刚更新完的那个时间点上执行代码。
异步更新队列：为什么不能马上更新 DOM？
直接同步更新 DOM 代价很高——每次修改都要走模板编译、虚拟 DOM Diff、真实 DOM 操作、重排重绘。如果连续赋值 5 次，同步方式会触发 5 轮完整流程，但实际只需要用最后一次的值更新一次就够了。
Vue 的做法是：
- 数据变化时，只把对应的 Watcher 记录进一个队列（
queue），不立即执行渲染 - 用哈希表
has去重，确保同一个组件的 Watcher 不重复入队 - 同一事件循环内多次修改，最终只保留一次更新任务
- 等到当前同步代码全部执行完，再统一刷新队列、更新 DOM
nextTick 是怎么知道 DOM 什么时候更新完的？
它不“监听 DOM”，而是利用 JavaScript 事件循环的执行顺序，把回调塞进微任务队列：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- Vue 内部优先使用
Promise.then或MutationObserver（微任务） - 环境不支持时降级为
setTimeout(fn, 0)（宏任务） - 微任务会在当前同步任务结束后、浏览器渲染前执行
- 而 DOM 更新本身就在这个微任务之后、渲染之前完成，所以 nextTick 回调能拿到最新 DOM
哪些场景必须用 nextTick？
凡是需要操作“刚更新完的 DOM 状态”的地方，都绕不开它：
- 获取元素尺寸或位置（比如
el.getBoundingClientRect()） - 滚动到底部（如聊天消息列表更新后自动滚动）
- 第三方库初始化（如初始化一个基于 DOM 高度计算的图表）
- 在
v-if切换后访问子组件 ref（因为 DOM 可能还没挂载）
写法上推荐实例方法：this.$nextTick(() => { /* DOM 已就绪 */ })，比全局 Vue.nextTick 更语义清晰、作用域明确。
一个小提醒：nextTick 不等于“页面已渲染完毕”
它保证的是“Vue 的 DOM 更新逻辑已执行完”，但浏览器是否已完成像素绘制，还要看后续的渲染帧。如果需要确保视觉可见（比如动画衔接），可配合 requestAnimationFrame 使用，不过绝大多数业务场景，$nextTick 已足够可靠。
