企业官网建设流程全解析

Vue 开发踩坑：Cannot read properties of null —— 从爆红到根治的 3 分钟急救手册

正文目录

1. 报错含义：null 从何而来？
2. 4 大高频翻车现场 & 修复代码
3. 万能兜底工具：可选链与默认值
4. 预防 checklist（不再踩坑）
5. 一句话总结

一、报错含义：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??{};

三、万能兜底工具：可选链与默认值

四、预防 checklist

• 异步数据初始化为空对象/数组而非null
• 模板层统一用?.+??兜底
• 生命周期内再操作 DOM / 异步数据
• 解构时给默认值const { a = '' } = obj ?? {}
• 大数据路径用lodash/get或可选链

五、一句话总结

「Cannot read properties of null」= 对象/数组/DOM 还没准备好就被读取。
用「可选链 + 默认值 + 生命周期」三件套，让 null 永远挡在读取之前，报错瞬间消失！

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作

📚 《Vue.js 3企业级项目开发实战（微课视频版》