Vue 3.4+ 模板中直接支持?.和??：?.安全访问深层属性，任一环节为null/undefined时返回undefined不报错；??仅在左侧为null或undefined时取右侧默认值，不误吞0、''、false等合法值。

Vue 3.4+ 模板中直接支持可选链 ?.，这是处理深层对象空值最轻量、最直观的方式——只要中间任一环节是 null 或 undefined，整个表达式就安静返回 undefined，不报错也不中断渲染。

用 ?. 替代冗长的嵌套判断

传统写法需要层层检查，比如：
{{ user && user.profile && user.profile.address && user.profile.address.city }}
不仅啰嗦，还容易漏判、难维护。换成可选链后，一行搞定：

• {{ user?.profile?.address?.city }} —— 安全访问，不崩溃
• {{ user?.orders?.[0]?.items?.length }} —— 支持数组索引和属性混合
• {{ user?.getName?.() }} —— 可选调用函数（函数不存在也不报错）

搭配 ?? 设置语义化默认值

?? 是空值合并运算符，只在左侧为 null 或 undefined 时才启用右侧值，不会误吞 0、false、'' 等合法假值：

• {{ user?.profile?.name ?? '游客' }} —— 名字为空时显示“游客”
• {{ user?.avatar?.url ?? '/images/avatar-default.png' }}
• 慎用 ||：比如 {{ user?.score || 0 }} 在 score 为 0 时也会被替换成默认值，逻辑出错

注意边界：?. 不解决结构缺失，需配合初始化或 v-if

可选链能防错，但不能补结构。如果 user 本身是 undefined，user?.profile 返回 undefined，后续再链式访问仍安全；但若模板里有整块依赖完整结构的 UI（如带头像、等级、简介的用户卡片），建议：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 用 v-if="user?.profile?.id" 控制区块是否渲染（比 v-if="user.profile" 更准，避免空对象 {} 被当成真值）
• 在 JS 层初始化响应式数据时主动补全结构，例如：user.value = { ...defaultUser, ...apiData }
• 复杂判断抽到 computed 中，提高复用性和可测性

兼容性与构建要求

模板中的 ?. 和 ?? 是 Vue 编译器层面支持的语法糖，不是运行时特性。前提是你的构建工具（如 Vite）启用了 ES2020+ 目标环境（Vite 默认已支持）。若使用 Webpack，需确认 babel-loader 配置了 @babel/plugin-proposal-optional-chaining 等插件。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！