onBeforeMount时虚拟DOM已就绪但真实DOM尚未插入，onMounted时真实DOM已挂载到页面；前者无法访问DOM节点，适合数据预处理；后者可安全操作DOM，适合初始化依赖DOM的库。
onBeforeMount 时 DOM 还没出现，onMounted 时 DOM 已真实插入页面。这不是“差不多”的时间差，而是有明确分水岭：虚拟 DOM 渲染完成但尚未挂载 vs 真实节点已存在于 document 中。
onBeforeMount：虚拟 DOM 就绪，真实 DOM 为零
这个阶段 Vue 已完成模板编译或渲染函数执行，生成了完整的 VNode 树（虚拟 DOM），但尚未执行任何 DOM 插入操作。此时：
-
document.getElementById、ref绑定的元素、this.$el（Vue2）或getCurrentInstance().proxy.$el（Vue3 选项式）全部为null或undefined - 无法通过 JS 查询或操作目标 DOM 节点
- 适合做最后的数据预处理、第三方库初始化（不依赖 DOM 的部分）、触发不涉及视图的副作用
onMounted：真实 DOM 已就位，可自由操作
这个阶段 Vue 已将 VNode 打补丁（patch）到页面，完成首次挂载。所有模板中声明的元素都已成为真实的浏览器节点：
-
document.querySelector、ref获取的 DOM 元素、this.$el或instance.vnode.el均可安全访问 - 可以调用
focus()、scrollIntoView()、getBoundingClientRect()等需真实布局信息的 API - 适合初始化依赖 DOM 的库（如 Chart.js、Mapbox、Swiper）、绑定原生事件监听器、触发动画入场
关键对比点：一个不可少，一个不能早
两者本质是同一过程的前后切片，不是并列选择：
- 顺序固定：一定先 onBeforeMount → 再 Vue 内部执行 mount → 最后 onMounted
- 用途隔离：需要 DOM 就等 onMounted；不需要 DOM 且想赶在挂载前执行，就放 onBeforeMount
- 容错差异：在 onBeforeMount 里查 DOM 会得到 null，不会报错但逻辑无效；在 onMounted 里查不到，大概率是模板写错或 ref 名不匹配
DOM 是否存在，是判断该用哪个钩子最硬核的标准。别凭感觉，直接 console.log 一下元素就知道了。
