dom更新是异步的，需用nexttick等待微任务完成；修改响应式数据后立即操作dom会读到旧值，必须await nexttick()或nexttick(() => {})确保dom就绪。
修改响应式数据后，DOM 不会立刻更新，而是等下一个微任务统一刷新。要拿到更新后的 DOM，必须用 nextTick 等待这一过程完成。
为什么不能直接操作 DOM
Vue 3 的响应式系统会把同一轮事件循环中的多次数据变更合并，在下一个微任务里批量更新 DOM。你改完 ref 或 reactive 数据，ref 指向的 DOM 元素内容、尺寸、可见性等状态还停留在旧值。
比如：
- 设置
show.value = true后立刻读el.offsetHeight，可能仍是 0（元素还没渲染） - 更新
message.value后马上取msgRef.value.innerText，拿到的还是旧文本 - 调用
focus()或scrollIntoView()时，目标元素可能尚未挂载或未生效
组合式 API 中正确写法
在 <script setup></script> 里，先导入再使用：
import { ref, nextTick } from 'vue'
两种主流方式：
-
async/await 方式（推荐）：语义清晰，避免嵌套，适合顺序逻辑
await nextTick()后再访问 DOM，保证安全 -
回调函数方式：传入一个函数，DOM 更新后自动执行
nextTick(() => { /* 此处 DOM 已就绪 */ })
注意：nextTick() 返回 Promise，所以可链式调用 .then()，但 await 更直观。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
典型使用场景示例
1. 获取更新后的元素尺寸
当 v-if 控制显隐或样式动态变化时：
- 设
show.value = true - 调用
await nextTick() - 再读
content.value.scrollHeight或offsetHeight
2. 自动聚焦输入框
比如弹窗打开后让第一个输入框获得焦点：
- 设
dialogVisible.value = true - 等待
await nextTick() - 执行
inputRef.value?.focus()
3. 集成第三方库（如 ECharts、MapLibre）
初始化前必须确保容器 DOM 已真实渲染：
- 在
onMounted里调用nextTick - 回调中用
chartRef.value初始化图表实例
注意事项
不要在 watch 回调里漏掉 nextTick —— 即使监听的是响应式数据，DOM 更新仍异步；也不要把它和 mounted 混淆：mounted 只保证初始渲染完成，后续数据驱动的更新仍需 nextTick；另外，nextTick 不会等待子组件递归完成，如需确保整个树更新完毕，可考虑配合 setTimeout 微调（极少数情况）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
