Vue 开发踩坑：Cannot read properties of null —— 从爆红到根治的 3 分钟急救手册
正文目录
- 报错含义：null 从何而来？
- 4 大高频翻车现场 & 修复代码
- 万能兜底工具：可选链与默认值
- 预防 checklist（不再踩坑）
- 一句话总结
一、报错含义：null 从何而来？
当你在控制台看到：
Cannot read properties of null (reading 'xxx')Vue 在告诉你：
「你试图读取null.xxx，但 null 没有属性。」
在 Vue 中，99% 是「异步数据 / 初始状态 / DOM 未挂载」三选一。
二、4 大高频翻车现场 & 修复代码
① 异步数据初始为 null
<script setup> const user = ref(null); // 初始 null onMounted(async () => { user.value = await fetchUser(); // 异步回来 }); </script> <template> <p>{{ user.name }}</p> <!-- ❌ 首屏 null --> </template>修复：初始空对象 + 可选链
constuser=ref({});// 或 { name: '' }// 模板<p>{{user?.name??'加载中...'}}</p>② 嵌套链式访问中途 null
<template> <p>{{ article.author.bio }}</p> <!-- ❌ author 为 null --> </template>修复：可选链一路到底
<p>{{ article?.author?.bio ?? '暂无简介' }}</p>③ DOM 未挂载就操作 ref
<script setup> const canvas = ref(null); // 初始 null onMounted(() => { canvas.value.getContext('2d'); // ✅ 这里安全 }); // ❌ 提前调用 canvas.value.getContext('2d'); // 报错修复：只在生命周期后使用
onMounted(()=>{canvas.value?.getContext('2d');// 可选链保险});④ 数组/对象解构空值
const{name}=user.value;// ❌ user.value 为 null修复：默认值解构
const{name='Guest'}=user.value??{};三、万能兜底工具：可选链与默认值
| 场景 | 工具 | 示例 |
|---|---|---|
| 模板 | 可选链?. | {{ obj?.a?.b ?? '' }} |
| JS 逻辑 | 空合并?? | const val = obj ?? {} |
| 深路径 | lodash get | get(obj, 'a.b.c', '') |
| 响应式新增 | Vue.set | Vue.set(obj, 'newProp', val) |
四、预防 checklist
- 异步数据初始化为空对象/数组而非
null - 模板层统一用
?.+??兜底 - 生命周期内再操作 DOM / 异步数据
- 解构时给默认值
const { a = '' } = obj ?? {} - 大数据路径用
lodash/get或可选链
五、一句话总结
「Cannot read properties of null」= 对象/数组/DOM 还没准备好就被读取。
用「可选链 + 默认值 + 生命周期」三件套，让 null 永远挡在读取之前，报错瞬间消失！
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
📚 《Vue.js 3企业级项目开发实战（微课视频版》
