onMounted 是组合式 API 中组件挂载后同步执行一次的生命周期钩子，需从 vue 显式导入并在 setup 内调用，适用于访问 DOM、启定时器、发请求等，不可在条件语句中使用。
在组合式 API 中，onMounted 是处理组件挂载后逻辑的核心生命周期钩子，它会在组件 DOM 渲染完成、首次挂载到页面后**同步执行一次**。和选项式 API 的 mounted 对应，但需通过导入并调用的方式使用，不能直接写在 setup 函数顶层。
如何正确声明和使用 onMounted
必须从 vue 显式导入，并在 setup() 函数内部调用：
- 不导入直接使用会报错（如
onMounted is not defined） - 不能在条件语句或循环中调用（Vue 要求生命周期钩子在 setup 顶层同步注册）
- 支持多个
onMounted调用，它们会按注册顺序依次执行
示例：
import { onMounted } from 'vue'export default {
setup() {
onMounted(() => {
// DOM 已就绪，可安全访问 ref 元素或发起请求
})
return {}
}
}
常见适用场景与注意事项
适合做的事：
- 访问
ref绑定的 DOM 元素（如inputRef.value.focus()） - 启动定时器、监听事件（记得在
onUnmounted中清理） - 触发初始数据请求（尤其依赖 DOM 尺寸或位置的请求，如获取容器宽高后再请求图表数据）
- 初始化第三方库实例（如初始化地图、富文本编辑器等）
不适合做的事：
- 修改响应式状态并期望立即触发 DOM 更新（onMounted 是同步钩子，DOM 已渲染完，更新会触发下一轮更新）
- 执行耗时同步操作（会阻塞主线程，影响首屏体验；建议用
nextTick或异步封装） - 依赖父组件 props 刚更新后的值（props 在 setup 执行时已可用，无需等到 mounted）
与 nextTick 的配合使用
如果需要确保 DOM 更新完全完成（比如刚通过 v-if 切换内容后立即测量），可在 onMounted 内部结合 nextTick：
onMounted(async () => {
await nextTick()
// 此时所有响应式更新导致的 DOM 变更已完成
console.log(elRef.value.offsetHeight)
})
在 script setup 语法糖中的写法
更简洁：直接调用，无需 return，也无需显式 export default：
<script setup>import { onMounted } from 'vue'
onMounted(() => {
console.log('组件已挂载')
})
</script>
