最可靠方式是使用 onMounted 钩子，它在组件真实 DOM 插入文档且子组件基本挂载后触发，可安全操作 DOM；含异步子组件时需配合 nextTick；数据更新后操作新 DOM 用 onUpdated；务必通过 onBeforeUnmount/onUnmounted 清理资源。
DOM 元素完全渲染后操作，最可靠、最常用的方式是使用 onMounted 钩子。它在组件真实 DOM 已插入文档、所有子组件也完成挂载（绝大多数情况下）后触发，此时可安全访问和操作 DOM。
onMounted：DOM 渲染完成后的首选时机
这是处理 DOM 的第一站，也是最推荐的入口点：
- 真实 DOM 已就绪，
document.getElementById、ref.value或$refs获取的元素均有效 - 适合初始化第三方库（如 Chart.js、Swiper、地图 SDK）
- 适合测量尺寸（
getBoundingClientRect()）、设置焦点、滚动定位 - 适合发起首屏数据请求（避免阻塞渲染）
需要等待子组件也渲染完毕？用 nextTick
如果组件内含异步子组件（如 <Suspense>）、或依赖 v-if 动态渲染的内容，onMounted 时这些内容可能尚未挂载。此时可在 onMounted 内调用 nextTick 确保整个视图树稳定：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
onMounted(() => { nextTick(() => { /* 此处 DOM 和所有子组件都已渲染完成 */ }) })- 特别适用于需操作子组件暴露的 DOM 节点，或依赖子组件渲染后布局的场景
数据更新后需操作新 DOM？用 onUpdated
当响应式数据变化、视图重新渲染完成后，onUpdated 会触发：
立即学习“前端免费学习笔记（深入）”；
- 可用于同步第三方库状态（如更新 ECharts 图表配置）
- 可用于重置滚动位置、调整动画节点类名
- ⚠️ 注意：不要在此修改响应式数据，否则会触发新一轮更新，导致死循环
清理工作别遗漏：onBeforeUnmount + onUnmounted
只要在 onMounted 或 onUpdated 中操作了 DOM（比如绑定事件、创建定时器、注册全局监听），就必须配套清理：
-
onBeforeUnmount：组件卸载前执行，适合关闭 WebSocket、取消 API 请求、清除定时器 ID -
onUnmounted：组件实例已销毁，适合解绑addEventListener、移除 MutationObserver、释放 Canvas 上下文等 - 漏掉清理会导致内存泄漏或跨组件副作用
