Vue Options API如何使用 $nextTick 在DOM更新后执行回调

$nextTick用于DOM更新完成后执行回调，必须在修改响应式数据后操作新DOM时使用，如聚焦、获取尺寸或滚动；它返回Promise，可await，比updated更精准控制时机。

在 Vue Options API 中，$nextTick 用于在 DOM 更新完成之后执行回调函数。它不是等页面完全加载完才触发，而是等当前数据变化引发的视图更新（即虚拟 DOM 重渲染 + 真实 DOM 同步）结束后立即执行。

什么时候必须用 $nextTick？

当你修改响应式数据后，想立即操作刚刚更新的 DOM 元素（比如聚焦输入框、获取元素尺寸、滚动到某位置），就必须用 $nextTick —— 因为 Vue 的 DOM 更新是异步的，直接写在赋值语句后面会拿不到最新 DOM。

1. 修改 data 或 props 后立即调用 ref 获取元素，但元素还没更新 → 需 $nextTick
2. 在 mounted 或 updated 钩子中操作 DOM，但需确保子组件也完成渲染 → 可配合 $nextTick
3. 动态显示一个元素后，立刻调用 focus() 或 scrollIntoView() → 必须等它真实挂载并可见

基本用法：在 methods 或生命周期中调用

在 Options API 组件中，this.$nextTick() 是实例方法，接收一个回调函数作为参数。它返回一个 Promise（可 await），也可传入普通函数。

methods: {updateAndFocus() {this.message = 'Hello World';// 此时 DOM 还未更新this.$nextTick(() => {// ✅ 这里 DOM 已同步，可以安全操作this.$refs.input.focus();});}}

也可以用 async/await 写法（更直观）：

async updateAndScroll() {this.list.push(newItem);await this.$nextTick(); // 等待本次更新完成this.$refs.list.scrollTop = this.$refs.list.scrollHeight;}

和 updated 钩子的区别

updated 在每次组件更新后触发，但它不保证子组件已更新完毕；而 $nextTick 是精确控制“本次更新完成”的时机，且可在任意时刻调用（不限于钩子内）。

1. updated 是被动响应，无法指定针对哪次更新
2. $nextTick 是主动调度，可绑定到某个具体操作之后，粒度更细
3. 如果只关心某次赋值后的 DOM，优先选 $nextTick；若需监听所有更新，用 updated

常见坑与注意事项

别在 created 或 beforeMount 中调用 $nextTick 试图操作 DOM —— 此时模板还没挂载，ref 还不存在。

1. 确保 ref 已定义且对应元素已渲染（比如 v-if 控制的元素要先为 true）
2. 避免在循环中频繁调用 $nextTick，它会批量合并，但过度使用影响可读性
3. 在 watch 中监听数据变化后操作 DOM，也要用 $nextTick，否则 DOM 还没反应过来