生命周期 DOM 操作如何在 onMounted 钩子中安全获取渲染完成后的 DOM 元素

onMounted 是安全获取渲染后 DOM 元素的唯一可靠同步入口点，需配合模板 ref 绑定与响应式 ref 声明使用，避免 document 查询、提前读取或错误绑定。

在 onMounted 钩子中安全获取渲染完成后的 DOM 元素，核心前提是：DOM 确实已挂载、ref 已绑定、且执行时机正确。这不是“写了就一定能拿到”，而是需要配合 ref 机制和生命周期语义一起使用。

必须用模板 ref 绑定目标元素

不能靠 document.querySelector 或 getElementById 在 onMounted 里硬查——虽然有时能查到，但不可靠，尤其在动态组件、Suspense 或 SSR 场景下容易失败。正确做法是：

1. 在模板中给元素加 ref="xxx"，比如 <div ref="container"></div>
2. 在 setup 中声明同名的响应式 ref：const container = ref(null)
3. onMounted 触发时，container.value 才被 Vue 自动赋值为真实 DOM 节点

onMounted 是唯一可靠的同步入口点

它保证了三件事同时成立：组件 DOM 树已创建、已插入父容器、所有同步子组件也已完成挂载。因此：

1. 不要在 setup 函数体顶部或 onBeforeMount 里读取 ref.value，此时值仍是 null
2. onMounted 回调内访问 ref.value 是安全且确定的，无需额外等待
3. 如果涉及异步组件（如 defineAsyncComponent）或 <Suspense>，要确保它们也已 resolve，否则其内部 DOM 不一定就绪

复杂场景下可搭配 nextTick 做微调

绝大多数情况 onMounted 就够了，但极少数情形需更精细控制，例如：

1. 依赖 CSS 动画/布局计算（如 getBoundingClientRect()），而样式尚未完全应用
2. 父组件刚传入新 prop，触发子组件重新渲染，你希望等这次更新也完成

这时可在 onMounted 内嵌套 nextTick：

onMounted(() => {nextTick(() => {console.log(container.value?.offsetHeight) // 确保布局已计算})})

避免常见误操作

这些写法看似合理，实际会出问题：

1. 在 onMounted 外部直接访问 ref.value —— 值还是 null
2. 把 onMounted 写在条件判断或循环里 —— Vue 会报错，它必须顶层调用
3. 用 ref 绑定到组件而非原生元素（如 <MyButton ref="btn"></MyButton>），拿到的是组件实例，不是 DOM —— 需确保 ref 指向的是原生标签或带 expose 的子组件