因为 `ref` 是在组件挂载后才被赋值，而 `initial` 阶段（如 `setup()` 或 `beforeCreate`）还未渲染 DOM，所以此时 `ref` 仍为 `null`。需在 `mounted` 或 `onMounted` 中使用。

Vue 中 `ref` 初始化为 `null` 并非缺陷，而是深思熟虑的设计：它真实反映 DOM 尚未存在的客观事实，兼顾逻辑诚实、TypeScript 类型安全与响应式追踪需求；其值仅在 `onMounted` 钩子中被 Vue 自动赋予真实 DOM 节点，而 `v-if`、异步组件、`v-for` 等场景更会延迟或动态影响绑定时机——掌握“生命周期卡点 + 空值防御”这一黄金法则，才能写出健壮、可维护的 DOM 操作逻辑。

因为 DOM 元素在组件挂载前根本不存在，ref 只是“占位符”，它不会主动创建节点，只在真实 DOM 渲染完成后才被 Vue 自动赋值。

ref 初始化为 null 是设计使然

声明 const elRef = ref(null) 本质是创建一个响应式容器，初始值设为 null 有三重考虑：

• 逻辑诚实：DOM 尚未生成，此时没有可指向的对象，null 是最准确的状态表达
• 类型安全：TypeScript 能据此推导出 elRef.value: HTMLElement | null，强制开发者做空值检查
• 响应式基础：Vue 需要监听这个引用的变更——从 null 到真实元素的过程，本身就是一次关键响应式更新

生命周期决定 ref 何时“活”过来

ref.value 的赋值不是随机发生的，它严格绑定在组件渲染流程中：

• setup 执行时：模板还没解析，DOM 还在内存里构型，ref.value 必为 null
• onBeforeMount 触发时：虚拟 DOM 已就绪，但尚未挂载到真实 DOM 树，ref.value 仍为 null
• onMounted 触发时：真实 DOM 已插入文档，Vue 完成 ref 绑定，此时 elRef.value 才首次指向有效节点

v-if、异步、v-for 会让 ref 更“晚熟”

即使组件已 mounted，ref 也可能暂时为 null，常见于以下场景：

• v-if 初始为 false：对应 DOM 根本没创建，ref 自然无从绑定；需等条件变为 true 后再操作，或用 watch 监听条件变化
• 异步组件或 Suspense：子组件加载完成前，其内部 ref 不会初始化；应在 onActivated 或加载回调中处理
• v-for 渲染列表：单个 ref 无法覆盖多个节点，应改用 ref 数组（如 ref="itemRefs"），并在 onUpdated 中确认批量 ref 已同步

正确访问方式：时机 + 防御

安全读取 ref 的核心是两步走——卡准时机、兜住空值：

• 所有 DOM 操作逻辑统一收口到 onMounted（或 onActivated，若组件被 keep-alive）
• 调用前必加防护：elRef.value?.focus() 或 if (elRef.value) { ... }
• 调试时可打印生命周期钩子顺序：console.log('mounted', elRef.value) 对比 setup 里的日志，直观验证时机

到这里，我们也就讲完了《因为 `ref` 是在组件挂载后才被赋值，而 `initial` 阶段（如 `setup()` 或 `beforeCreate`）还未渲染 DOM，所以此时 `ref` 仍为 `null`。需在 `mounted` 或 `onMounted` 中使用。》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！