可选链操作符

在 {{ store.state.user?.loginUser?.userName ?? "未登录" }} 这段代码中，问号 ? 对应两种不同的现代 JavaScript/TypeScript 语法特性：

一、可选链操作符（Optional Chaining）：?.

• 作用：安全访问嵌套对象属性，避免因中间属性为 null 或 undefined 导致的报错[1]。
• 示例解释：

  store.state.user?.loginUser?.userName
  

  • 等价于：

    store.state.user && store.state.user.loginUser && store.state.user.loginUser.userName
    

  • 执行逻辑：
    若 store.state.user 为 null/undefined，直接返回 undefined，不会继续访问 loginUser；若 loginUser 不存在，同样停止后续访问。这能有效避免 Cannot read property 'xxx' of undefined 的错误[1]。

二、空值合并运算符（Nullish Coalescing）：??

• 作用：为左侧表达式提供默认值，仅当左侧为 null 或 undefined 时，才返回右侧值[1]。
• 示例解释：

  userName ?? "未登录"
  

  • 执行逻辑：
    若 userName 为 null/undefined，显示 "未登录"；否则直接显示 userName。
    （与 || 的区别：|| 会对所有假值如 0、""、false 生效，而 ?? 仅针对 null/undefined）[1]

三、完整代码解析

<div>{{ store.state.user?.loginUser?.userName ?? "未登录" }}</div>

• 执行顺序：
  1. 通过 ?. 安全访问 store.state.user.loginUser.userName
  2. 若最终结果为 null/undefined，通过 ?? 显示默认值 "未登录"

四、对比传统写法

// 无可选链和空值合并的写法
const userName = store.state.user && 
                 store.state.user.loginUser && 
                 store.state.user.loginUser.userName;
<div>{{ userName || "未登录" }}</div>

• 缺点：
  1. 嵌套判断冗长
  2. || 会错误处理 userName 为 "" 或 0 的情况

通过这两种语法，代码可读性和安全性都得到了显著提升[1]。