onbeforemount 是组件挂载前的最后一个准备时机，此时虚拟 dom 已就绪但真实 dom 尚未插入，适合做不依赖 dom 的初始化工作，如设默认配置、预处理 props、初始化无 dom 依赖的 sdk、校验入参等，不可操作真实元素，也不阻塞异步。
onBeforeMount 是组件挂载到真实 DOM 前的最后一个准备时机，此时模板已编译为虚拟 DOM，但尚未插入页面、不可操作真实元素。
onBeforeMount 的核心特点
它在 setup() 执行之后、DOM 渲染之前触发，适合做不依赖 DOM 的初始化工作：
- 设置本地默认配置（如主题、尺寸、开关状态）
- 预处理 props 或计算初始参数
- 初始化非 DOM 相关的第三方 SDK 实例（如日志上报器、埋点工具）
- 校验必要入参或提前抛出错误（避免挂载失败）
基本写法（<script setup> 中）</script>
直接导入并调用即可，无需返回值，也不支持异步等待：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
import { onBeforeMount, ref } from 'vue'
const config = ref({ theme: 'light', locale: 'zh-CN' })
onBeforeMount(() => {
// 可安全读取 props 和响应式数据
// 但 document.getElementById('xxx') 会返回 null
console.log('即将挂载，虚拟 DOM 已就绪')
// 示例：根据 props 设置默认配置
if (props.defaultTheme) {
config.value.theme = props.defaultTheme
}
})
常见误区提醒
容易误用的几个点要注意：
- 不能操作真实 DOM：此时 $el 还不存在，querySelector 或 getElementById 都拿不到元素
- 不等异步完成就继续挂载：onBeforeMount 内部的 Promise 不会阻塞渲染，如需等待应改用 onMounted + loading 状态
- 不是数据初始化主入口：响应式数据建议在 setup 中声明，onBeforeMount 更适合“挂载前校验”或“轻量预处理”
对比 onMounted 的分工
两者常配合使用，职责分明：
- onBeforeMount：准备就绪，检查条件，设默认值，启动无 DOM 依赖的逻辑
- onMounted：DOM 已就位，可查元素、绑事件、初始化图表/编辑器等需要真实节点的库
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
