$nexttick用于dom更新完成后执行回调，必须在修改响应式数据后操作新dom时使用，如聚焦、获取尺寸或滚动；它返回promise，可await，比updated更精准控制时机。
在 Vue Options API 中，$nextTick 用于在 DOM 更新**完成之后**执行回调函数。它不是等页面完全加载完才触发，而是等当前数据变化引发的视图更新（即虚拟 DOM 重渲染 + 真实 DOM 同步）结束后立即执行。
什么时候必须用 $nextTick？
当你修改响应式数据后，想立即操作刚刚更新的 DOM 元素（比如聚焦输入框、获取元素尺寸、滚动到某位置），就必须用 $nextTick —— 因为 Vue 的 DOM 更新是异步的，直接写在赋值语句后面会拿不到最新 DOM。
- 修改
data或props后立即调用ref获取元素，但元素还没更新 → 需$nextTick - 在
mounted或updated钩子中操作 DOM，但需确保子组件也完成渲染 → 可配合$nextTick - 动态显示一个元素后，立刻调用
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 是精确控制“本次更新完成”的时机，且可在任意时刻调用（不限于钩子内）。
-
updated是被动响应，无法指定针对哪次更新 -
$nextTick是主动调度，可绑定到某个具体操作之后，粒度更细 - 如果只关心某次赋值后的 DOM，优先选
$nextTick；若需监听所有更新，用updated
常见坑与注意事项
别在 created 或 beforeMount 中调用 $nextTick 试图操作 DOM —— 此时模板还没挂载，ref 还不存在。
- 确保
ref已定义且对应元素已渲染（比如 v-if 控制的元素要先为 true） - 避免在循环中频繁调用
$nextTick，它会批量合并，但过度使用影响可读性 - 在
watch中监听数据变化后操作 DOM，也要用$nextTick，否则 DOM 还没反应过来
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
