onMounted 是安全获取渲染后 DOM 元素的唯一可靠同步入口点，需配合模板 ref 绑定与响应式 ref 声明使用，避免 document 查询、提前读取或错误绑定。
在 onMounted 钩子中安全获取渲染完成后的 DOM 元素，核心前提是：DOM 确实已挂载、ref 已绑定、且执行时机正确。这不是“写了就一定能拿到”，而是需要配合 ref 机制和生命周期语义一起使用。
必须用模板 ref 绑定目标元素
不能靠 document.querySelector 或 getElementById 在 onMounted 里硬查——虽然有时能查到，但不可靠，尤其在动态组件、Suspense 或 SSR 场景下容易失败。正确做法是：
- 在模板中给元素加
ref="xxx"，比如<div ref="container"></div> - 在
setup中声明同名的响应式 ref：const container = ref(null) -
onMounted触发时，container.value才被 Vue 自动赋值为真实 DOM 节点
onMounted 是唯一可靠的同步入口点
它保证了三件事同时成立：组件 DOM 树已创建、已插入父容器、所有同步子组件也已完成挂载。因此：
- 不要在
setup函数体顶部或onBeforeMount里读取ref.value，此时值仍是null -
onMounted回调内访问ref.value是安全且确定的，无需额外等待 - 如果涉及异步组件（如
defineAsyncComponent）或<Suspense>，要确保它们也已 resolve，否则其内部 DOM 不一定就绪
复杂场景下可搭配 nextTick 做微调
绝大多数情况 onMounted 就够了，但极少数情形需更精细控制，例如：
- 依赖 CSS 动画/布局计算（如
getBoundingClientRect()），而样式尚未完全应用 - 父组件刚传入新 prop，触发子组件重新渲染，你希望等这次更新也完成
这时可在 onMounted 内嵌套 nextTick：
onMounted(() => {
nextTick(() => {
console.log(container.value?.offsetHeight) // 确保布局已计算
})
})
避免常见误操作
这些写法看似合理，实际会出问题：
- 在
onMounted外部直接访问ref.value—— 值还是null - 把
onMounted写在条件判断或循环里 —— Vue 会报错，它必须顶层调用 - 用
ref绑定到组件而非原生元素（如<MyButton ref="btn"></MyButton>），拿到的是组件实例，不是 DOM —— 需确保 ref 指向的是原生标签或带expose的子组件
