Vue模板中不能直接使用可选链操作符（?.），需通过computed、v-if逐层判断或JS层封装来安全访问嵌套属性，空值合并（??）可配合使用但须注意模板语法限制。

Vue 模板中**不能直接使用可选链操作符（?.）**，即使语法看起来合法，也会在编译或运行时出错。这不是浏览器限制，而是 Vue 模板编译器本身不支持该语法——截至 2026 年 5 月，包括 Vue 3.4+ 在内，官方仍未将其纳入模板语法规范。

用计算属性预处理嵌套数据

把带 ?., ?? 的安全访问逻辑移到 computed 中，模板只读取已校验过的值。这样语义清晰、便于复用，也避免模板变重。

• 例如用户头像可能深层嵌套：this.user?.settings?.avatarUrl → 提前在 computed 中定义：

computed: {
  userAvatar() {
    return this.user?.settings?.avatarUrl ?? '/default-avatar.png'
  }
}

模板中直接写：{{ userAvatar }}，干净又可靠。

用 v-if 做存在性判断

对需要条件渲染的深层字段，用 v-if 显式检查父级对象是否存在，再访问子属性。注意：不能写 v-if="user?.profile?.name"，这在模板里无效。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

立即学习“前端免费学习笔记（深入）”；

• 正确写法是逐层判断：v-if="user && user.profile"
• 然后内部再用：{{ user.profile.name }}
• 若只需显示一个字段且允许为空，也可搭配 ?? 在表达式里 fallback：{{ (user?.profile?.name) ?? '未命名' }}（括号增强可读性，部分构建工具可识别）

在 JS 层统一处理，模板保持简洁

模板不是 JavaScript 执行环境，它的设计目标是声明式、可预测、易调试。所有“防御性访问”都应下沉到 setup script / computed / methods 中。

• 不要试图在模板里写 {{ user?.address?.city?.toUpperCase() }} —— 这会报错，也不利于维护
• 改用方法封装：getCityName() { return this.user?.address?.city?.toUpperCase() || '-' }
• 空值合并（??）比 || 更精准，能保留 0、false、'' 等有效假值

关于 Babel 和实验性支持的提醒

虽然可通过 @babel/plugin-proposal-optional-chaining 让 script 部分 支持 ?. ，但该插件对 <template> 内容无影响。某些 IDE 或类型检查工具（如 Volar）可能“高亮通过”，但实际运行仍会失败。官方明确建议：模板中勿硬写 ?. ，稳妥永远优于侥幸。