onmounted 必须在 setup() 顶层同步调用，不可置于异步操作之后；支持在回调中使用 async/await 处理数据请求，是安全操作 dom 的最早时机，亦可封装于组合式函数中复用。
在 Vue 单文件组件（SFC）中使用 onMounted，核心就一点：它必须在 setup() 函数内部调用，且不能出现在异步操作之后。这是确保钩子能正确绑定到当前组件实例的前提。
基础写法：在 setup 中直接导入并调用
这是最常见也最安全的方式。无论你用的是普通 setup() { ... } 还是 <script setup></script> 语法，逻辑一致：
- 从
'vue'导入onMounted - 在
setup函数体的顶层（非异步回调、非条件分支内）调用它 - 传入一个函数，里面写挂载后要执行的逻辑，比如 DOM 操作、初始化第三方库、发起请求等
示例（<script setup></script>）：
import { ref, onMounted } from 'vue'
<p>const message = ref('Loading...')</p><p>onMounted(() => {
message.value = 'Ready!'
// ✅ 此时 DOM 已存在，可安全 querySelector
const el = document.getElementById('main')
if (el) el.style.opacity = '1'
})
</p>
处理异步操作：在 onMounted 回调里 await
挂载后常需请求数据，这时要把 async 写在回调函数上，而不是把 onMounted 放到 await 后面——后者会报错“no active component instance”。
