根本原因是组件未挂载完成就访问ref，ref.value仅在mounted后才指向真实DOM；应于onMounted中读取，避免setup或onBeforeMount中使用，并注意v-if、异步组件及v-for等场景的延迟问题。

ref 绑定 DOM 元素获取不到，根本原因通常是 组件尚未挂载完成，就尝试访问 ref 所指向的 DOM 节点。Vue 的 ref 在模板中声明后，并不会立即可用——它只在组件挂载（mounted）之后才真正关联到真实 DOM。若在 setup 或 onBeforeMount 中直接读取 ref.value，大概率是 null。

确保在 mounted 钩子中访问 ref

这是最直接、最稳妥的做法。ref 对象只有在组件完成挂载、DOM 渲染完毕后，value 才会被赋值为真实的 DOM 元素。

• 使用 Composition API 时，在 onMounted 内读取 ref
• 避免在 setup 函数顶部或 onBeforeMount 中访问 ref.value
• 示例：
  

  const inputRef = ref(null)<br>
      onMounted(() => {<br>
          inputRef.value?.focus() // ✅ 安全<br>
      })

用 v-if 控制 ref 元素的渲染时机

如果 ref 绑定的元素被 v-if 动态控制显示，而初始值为 false，那即使组件已挂载，ref 仍可能为 null——因为对应 DOM 根本没生成。

• 确保 ref 所在元素在首次挂载时是可见的（v-if 初始为 true），或等条件满足后再访问
• 可在 watch 监听相关响应式变量，待其变为 true 后再操作 ref
• 例如：
  

  watch(showPanel, (val) => {<br>
          if (val && panelRef.value) panelRef.value.scrollIntoView()<br>
      })

处理异步加载或动态组件中的 ref

当 ref 位于 <suspense></suspense>、异步组件、或通过 v-for 动态生成的元素中时，ref 可能延迟就位或批量存在多个实例。

• 对 v-for 场景，用 ref 数组接收多个节点：ref="itemRefs"，配合 onUpdated 确保列表更新后 ref 已同步
• 异步组件需等待 defineAsyncComponent 加载完成，再触发 ref 访问逻辑
• 可结合 nextTick：在状态变更后调用 nextTick(() => { /* 此时 DOM 已更新 */ })

调试技巧：快速验证 ref 是否就绪

开发阶段可通过简单日志和条件判断快速定位问题。

• 打印 ref 值并观察生命周期钩子执行顺序：console.log('setup', inputRef.value) → console.log('mounted', inputRef.value)
• 加空值防护：始终用 ref.value?.someMethod() 或 if (ref.value) { ... }
• 浏览器中检查元素是否真实存在于 DOM：打开开发者工具，搜索该元素是否已渲染且未被移除