nextTick用于等待DOM更新完成后再执行操作，典型场景包括mounted中操作子组件DOM、onUpdated中读取布局信息、onActivated后聚焦或滚动；必须配合使用而非延时器。
Vue 3 生命周期钩子本身不自动等待 DOM 渲染完成，尤其在数据变更触发更新后，视图更新是异步批量进行的。要确保操作的是最新 DOM，必须主动配合 nextTick —— 它不是“延时器”，而是精准同步到 Vue 渲染队列清空后的信号。
哪些钩子常需 nextTick 配合
并非所有钩子都需要：mounted、onMounted 仅保证组件挂载完毕，但子组件可能未渲染；onUpdated、onActivated 在响应式更新后触发，但 DOM 尚未刷新。真正需要 nextTick 的典型场景有：
- mounted / onMounted 中操作子组件 DOM：比如调用子组件方法、获取子元素尺寸，此时子组件可能还在初始化或未完成首次渲染
- onUpdated 中读取更新后的布局信息：如 clientHeight、getBoundingClientRect()，因为 onUpdated 执行时 DOM 还没重绘
- onActivated（keep-alive 激活）后立即聚焦或滚动：v-if 切换或缓存激活导致 DOM 重建，需等真实节点就位
正确写法：两种主流模式
推荐使用 async/await 形式，逻辑清晰且避免嵌套：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
- 在 setup script 中：await nextTick() 后再执行 DOM 查询或操作
- 在 Options API 中：await this.$nextTick()（注意 this 上下文）
- 回调形式仍可用，但可读性略低：nextTick(() => { /* DOM 已更新 */ })
为什么 onUpdated 之后还要 nextTick
官方文档明确说明：onUpdated 在“组件因响应式状态变更而更新其 DOM 树之后执行”，但这个“之后”指的是虚拟 DOM diff 完成、patch 任务已入队，**尚未执行真实的 DOM 操作**。Vue 的渲染调度分两步：先 flushJobs（执行组件 render 和 patch），再由浏览器实际绘制。nextTick 的 Promise 正好 resolve 在 flushJobs 结束、DOM 更新刚完成、重绘前的微任务末尾——所以 onUpdated 内部调用 nextTick 才能拿到真实生效的 DOM。
立即学习“前端免费学习笔记（深入）”；
一个典型错误对比
比如在 onUpdated 中尝试获取元素宽度：
- ❌ 直接写 el.offsetWidth → 可能仍是旧值，甚至 el 为 null（若刚插入）
- ✅ 写 await nextTick(); console.log(el.offsetWidth) → 稳定获取更新后尺寸
