onMounted 是 Vue 3 组合式 API 中组件挂载完成、DOM 可访问时执行逻辑的标准入口，需从 vue 显式导入并在 setup 中调用，支持多次使用，SSR 期间不执行。
在 Vue 3 组合式 API 中，onMounted 是组件挂载完成、DOM 可访问时执行逻辑的标准入口。它不是配置项，而是一个可多次调用的函数，必须从 vue 显式导入，并在 setup 函数（或 <script setup></script>）中使用。
基础写法：导入 + 调用回调
这是最常见也最必要的用法：
- 在脚本顶部导入：
import { onMounted } from 'vue' - 在
setup()内直接调用：onMounted(() => { /* 你的代码 */ }) - 回调函数会在组件真实插入 DOM 后同步触发，此时
document.querySelector、ref绑定的元素、第三方库初始化等操作都已安全
配合响应式数据做初始化
onMounted 常用于“先渲染、后填充”的场景，比如设置初始值或触发首次请求：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 定义
const data = ref(null)或const loading = ref(true) - 在 onMounted 回调里发起 API 请求，并更新这些 ref
- 模板中可用
v-if="data"或v-else-if="loading"控制加载态与内容显示
封装成可复用逻辑（Composable）
当某类挂载后行为需要跨组件复用时，可把它抽成组合式函数：
立即学习“前端免费学习笔记（深入）”；
- 例如创建
useChartInit(elRef)，内部调用onMounted(() => initChart(elRef.value)) - 该函数可在任意组件中导入并调用，无需重复写生命周期样板
- VueUse 的
useMounted就是典型例子——它本质就是ref(false)+onMounted(() => ...)的封装
注意点：时机、SSR 和清理
几个关键细节影响实际效果：
- 服务端不执行：onMounted 在 SSR（服务端渲染）期间完全跳过，只在客户端运行
-
不能在 setup 外调用：必须位于
setup()执行上下文中，否则会报错“no current instance” - 支持多次调用：可在一个组件中多次使用 onMounted，回调按注册顺序依次执行
-
清理工作较少在此做：一次性副作用适合放 here；如需清理（如定时器、事件监听），更推荐配对使用
onUnmounted
