Vue Composition API如何使用 onBeforeMount 编写挂载开始前的逻辑

onBeforeMount 是 Vue 3 中在组件挂载前执行的钩子，虚拟 DOM 已生成但真实 DOM 未插入，可安全操作响应式数据，不可访问 DOM；适用于数据预处理、权限校验、资源预加载等场景。

onBeforeMount 是 Vue 3 Composition API 中用于在组件挂载到 DOM 前执行逻辑的钩子。它比 onMounted 更早触发，此时虚拟 DOM 已生成，但真实 DOM 还未插入页面，因此不能操作或访问 DOM 元素。

onBeforeMount 的核心特点

它属于挂载阶段的前置钩子，运行时机介于 setup() 执行完毕和 onMounted 触发之间。适合做与 DOM 无关的、需要在渲染前完成的准备工作。

1. 不能访问 document 或任何 DOM API（如 querySelector 返回 null）
2. 可以安全读写响应式数据（ref、reactive）
3. 常用于：校验初始 props、预处理数据、设置内部状态标志、发起不依赖 DOM 的轻量初始化

基本用法：导入 + 调用 + 回调

需从 'vue' 显式导入，并在 setup() 函数内调用：

import { ref, onBeforeMount } from 'vue'export default {setup(props) {const loading = ref(true)onBeforeMount(() => {// ✅ 可以修改响应式状态loading.value = false// ✅ 可以基于 props 做预判断if (!props.id) {console.warn('缺少必要 id')}// ❌ 不要在这里操作 DOM// document.getElementById('app') // 会返回 null})return { loading }}}

常见适用场景举例

1. 数据预填充：根据路由参数或 props 提前计算初始值，避免挂载后闪动
2. 权限校验：检查用户是否有权渲染该组件，无权时可提前跳转或抛出错误（配合 onErrorCaptured）
3. 资源预加载：发起不依赖 DOM 的 API 请求（如获取配置、静态文案），为后续渲染准备数据
4. 状态标记：设置 isMounted: ref(false) 等标识，配合后续逻辑做条件控制

注意事项与避坑点

1. 不要在此处调用第三方 UI 库的初始化方法（如 Chart.init()），它们通常依赖真实 DOM —— 放到 onMounted 更稳妥
2. 异步操作（如 await fetch()）可以执行，但不会阻塞挂载流程；若需等待数据再渲染，应结合 v-if 或骨架屏
3. 多个 onBeforeMount 回调按注册顺序依次执行，可用于模块化逻辑拆分