生命周期 挂载前后状态如何对比 onBeforeMount 与 onMounted 阶段 DOM 树的构建状态

onBeforeMount时虚拟DOM已就绪但真实DOM尚未插入，onMounted时真实DOM已挂载到页面；前者无法访问DOM节点，适合数据预处理；后者可安全操作DOM，适合初始化依赖DOM的库。

onBeforeMount 时 DOM 还没出现，onMounted 时 DOM 已真实插入页面。这不是“差不多”的时间差，而是有明确分水岭：虚拟 DOM 渲染完成但尚未挂载 vs 真实节点已存在于 document 中。

onBeforeMount：虚拟 DOM 就绪，真实 DOM 为零

这个阶段 Vue 已完成模板编译或渲染函数执行，生成了完整的 VNode 树（虚拟 DOM），但尚未执行任何 DOM 插入操作。此时：

1. document.getElementById、ref 绑定的元素、this.$el（Vue2）或 getCurrentInstance().proxy.$el（Vue3 选项式）全部为 null 或 undefined
2. 无法通过 JS 查询或操作目标 DOM 节点
3. 适合做最后的数据预处理、第三方库初始化（不依赖 DOM 的部分）、触发不涉及视图的副作用

onMounted：真实 DOM 已就位，可自由操作

这个阶段 Vue 已将 VNode 打补丁（patch）到页面，完成首次挂载。所有模板中声明的元素都已成为真实的浏览器节点：

1. document.querySelector、ref 获取的 DOM 元素、this.$el 或 instance.vnode.el 均可安全访问
2. 可以调用 focus()、scrollIntoView()、getBoundingClientRect() 等需真实布局信息的 API
3. 适合初始化依赖 DOM 的库（如 Chart.js、Mapbox、Swiper）、绑定原生事件监听器、触发动画入场

关键对比点：一个不可少，一个不能早

两者本质是同一过程的前后切片，不是并列选择：

1. 顺序固定：一定先 onBeforeMount → 再 Vue 内部执行 mount → 最后 onMounted
2. 用途隔离：需要 DOM 就等 onMounted；不需要 DOM 且想赶在挂载前执行，就放 onBeforeMount
3. 容错差异：在 onBeforeMount 里查 DOM 会得到 null，不会报错但逻辑无效；在 onMounted 里查不到，大概率是模板写错或 ref 名不匹配

DOM 是否存在，是判断该用哪个钩子最硬核的标准。别凭感觉，直接 console.log 一下元素就知道了。