nextTick 用于在 Vue 数据更新后 DOM 完成渲染时执行操作；因 Vue 异步批量更新 DOM，直接读取可能获取旧状态，nextTick 确保回调在本次更新周期结束后执行，支持回调函数和 async/await 两种用法。
Vue 在数据变化后不会立即更新 DOM，而是异步批量更新。如果你需要在 DOM 更新完成后执行某些操作（比如获取元素尺寸、聚焦输入框、滚动到某位置），nextTick 就是专门为此设计的 API。
为什么必须用 nextTick？
Vue 的响应式更新是异步的：当你修改响应式数据，视图不会立刻重绘，而是被推入一个微任务队列，等当前同步代码执行完再统一处理。如果直接在赋值后读取 DOM，拿到的仍是旧状态。
- 例如：
this.show = true; console.log(this.$refs.box.offsetHeight)—— 此时box可能还没渲染出来，高度为 0 -
nextTick确保回调在本次 DOM 更新周期完成之后执行，此时节点已真实挂载或更新完毕
基本用法：回调函数形式
传入一个函数，它会在 DOM 更新后被调用：
this.message = 'Hello';
this.$nextTick(() => {
// 这里可以安全操作更新后的 DOM
this.$refs.input.focus();
});
注意：该方法在 Vue 2 和 Vue 3 的 Options API 中写法一致；Composition API 中需从 vue 显式导入：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
import { nextTick } from 'vue';
await nextTick();
// 或
nextTick(() => {
// ...
});
与 async/await 配合更简洁
因为 nextTick 返回 Promise，可直接 await，避免嵌套回调：
async updateAndFocus() {
this.isOpen = true;
await this.$nextTick(); // Vue 2
// 或 await nextTick(); // Vue 3 Composition API
this.$refs.trigger.focus();
}
适用于需要串行等待多个更新场景，比如连续触发两次状态变更并分别操作 DOM。
常见误用和注意事项
不要在 created 或 mounted 钩子中无意义地调用 nextTick —— 如果只是想确保组件已挂载，mounted 本身已足够；nextTick 是为“数据变更 → 视图更新 → 操作 DOM”这个链条服务的。
- 多次连续调用
nextTick不会触发多次，它们会被合并进同一个微任务 - 在
v-if切换元素时，nextTick能确保元素已插入或移除完成 - 若涉及第三方库（如 Chart.js、Map 组件），务必等 DOM 真实就绪后再初始化
