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 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章