Vue 无法读取 null 的属性（读取 value）

症状

错误“Vue 无法读取 null 的属性（读取 value）”指向一个明确的失效模式。下面依次给出症状、定位该原因的检查命令、根本原因、修复方案，以及证明修复有效的验证步骤。

可观察到的症状包括：

• 在 composable 中报 Cannot read properties of null (reading value)
• ref 在 setup 中为 null，但在事件处理器中正常
• 仅在首次渲染时出现该错误

诊断

先在隔离环境中复现故障，再按顺序执行以下检查，逐步缩小范围。

步骤 1

console.log(elRef.value) // in setup vs onMounted

它在 setup 期间为 null，在 onMounted 后才填充；过早读取即致错。

步骤 2

elRef.value?.focus()

可选链可避免立即崩溃，同时把调用移到正确的生命周期。

常见诱因（按出现频率排序）：

• 在 onMounted 之前读取 DOM 模板 ref，此时仍为 null
• composable 在异步初始化完成前返回 null
• 模板与脚本中的 ref 名称不匹配

根因

模板 ref 仅在组件挂载后才被赋值。在 setup 期间读取 elRef.value 得到 null，对其做属性访问即抛错，因此同样的代码在 onMounted 或事件处理器中可用。

修复

在 onMounted 或之后访问 DOM ref，用可选链防护，并让 composable 在数据加载前返回安全默认值。

注意：当元素可能根本不存在时，等待 nextTick 不能替代 onMounted；应确保其被渲染。

<script setup>
import { ref, onMounted } from 'vue';
const inputEl = ref(null);

onMounted(() => {
  inputEl.value?.focus(); // safe: populated after mount
});
</script>

<template>
  <input ref="inputEl" />
</template>

验证

运行组件并确认无 null 访问；挂载后聚焦或测量应成功。

修复后补充一条回归测试，复现原始症状，防止问题再次出现。

这类故障通常是环境问题而非纯逻辑错误，因此在缺陷记录中应写明完整命令、环境变量与工作目录。请用最小的脚本复现，待最小用例清楚后再扩大范围。为这类故障准备一份简短的排查清单，能显著减少下次排障时间。