onmounted 是 vue 3 中在组件 dom 挂载后执行一次的钩子，用于安全操作 dom、初始化第三方库或发起首次请求；支持读写响应式数据并自动更新视图，但不可在 setup 顶层直接访问 dom。
onMounted 是 Vue 3 Composition API 中最常用的生命钩子之一，用于在组件真实 DOM 挂载完成后执行逻辑——比如操作 DOM、初始化第三方库、发起首次数据请求等。
onMounted 的基本写法
在 <script setup></script> 中直接导入并调用即可，无需返回或手动绑定：
- 确保 DOM 已就绪，
document.getElementById或ref绑定的元素可安全访问 - 函数体里写的代码只会在组件挂载后执行一次
- 不支持异步等待 DOM 渲染（它本身已保证时机），但内部可 await 异步操作
常见使用场景与写法
访问 DOM 元素：配合 template ref 获取真实节点
- 在模板中用
ref="el"标记目标元素 - 在
setup中声明同名 ref（如const el = ref()） -
onMounted内通过el.value操作该 DOM
初始化外部库：如 ECharts、Mapbox、Swiper 等需要 DOM 容器的库
- 先确认容器存在，再调用
init()或new Chart(...) - 避免在
setup同步执行，防止因 DOM 未就绪报错
触发首次数据加载：适合列表页、详情页的初始请求
- 调用
api.getDetail(id)或useFetch()类逻辑 - 注意：若依赖 props 或路由参数，需确保它们已在
onMounted前解析完成（Vue Router 4+ 的useRoute是同步可用的）
注意事项和易错点
不要在 onMounted 外部直接操作 DOM —— 此时节点尚未生成；也不要在 setup 函数顶层写 document.querySelector，大概率返回 null。
- 多个
onMounted调用会按顺序依次执行，可用于拆分关注点（如一个管 DOM，一个管请求） - 它不接收参数，也不返回值，纯粹是副作用注册入口
- 在
<script setup></script>中无法访问this，所有逻辑必须基于组合式 API 构建
结合响应式变量一起用
onMounted 可以自由读写 ref 和 reactive 数据，且变更会触发视图更新：
- 例如设置
loading.value = true，再发请求，最后设为 false - 修改
state.count++会立即反映在模板中 - 无需额外 watch 或 nextTick，Vue 自动调度更新
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
