onmounted 是 vue 3 composition api 中组件挂载完成后的生命周期钩子，用于安全操作 dom、初始化第三方库或发起首屏请求；它必须在 setup 或 中调用，触发时虚拟 dom 已渲染、真实 dom 已插入、ref 可访问。
Vue 3 Composition API 中，挂载阶段的核心生命周期挂载点是 onMounted，它对应组件完成 DOM 渲染并正式挂载到页面后的第一时间。
这个钩子是你操作真实 DOM、初始化依赖 DOM 的第三方库（比如 ECharts、Mapbox、Swiper）、绑定事件监听器或发起首屏数据请求的最常用且最安全的位置。
onMounted 是什么？
- 它是一个从
vue导入的函数，必须在<script setup></script>或setup()函数内调用； - 触发时机：虚拟 DOM 已渲染完毕，真实 DOM 节点已插入页面，
ref可被安全访问； - 此时组件及其所有子组件都已完成挂载（除非使用了
v-if或keep-alive等特殊逻辑）。
import { onMounted } from 'vue'
onMounted(() => {
// ✅ 可以访问 this.$refs 或 useTemplateRef 获取的 DOM 元素
// ✅ 可以调用 document.getElementById、querySelector 等原生 API
// ✅ 可以初始化图表、地图、富文本编辑器等需要 DOM 的库
})
挂载前还能做什么？—— onBeforeMount
- 在
onMounted之前执行，模板已编译但尚未挂载； - 此时
$el还未存在，不能操作真实 DOM； - 适合做挂载前的数据预处理或状态微调，比如根据路由参数设置初始 loading 状态。
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
// ⚠️ 不要操作 DOM（this.$el 或 ref 仍为 null）
// ✅ 可以修改响应式数据，影响即将渲染的内容
})
常见误用提醒
- 不要在
setup()顶层直接操作 DOM —— 此时 DOM 尚未生成； - 避免在
onUpdated中修改响应式数据 —— 容易引发无限更新循环； -
onMounted不会因v-if切换而重复触发，仅在首次挂载时执行；若需响应显隐变化，应结合onActivated（配合<keep-alive></keep-alive>）。
与 Options API 对应关系
| Composition API | Options API | 执行时机 |
|---|---|---|
onBeforeMount |
beforeMount |
模板编译完成，DOM 尚未挂载 |
onMounted |
mounted |
DOM 已挂载，可安全操作 |
setup() 本身不是挂载钩子，而是整个 Composition API 的入口，它发生在 beforeCreate 和 created 阶段之间，早于任何挂载逻辑。
不复杂但容易忽略。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
