vue 模板中空字符串 “” 是 falsy 值，但 ?? 仅对 NULL 或 undefined 生效，因此 “” ?? “fallback” 会原样渲染空字符串，而非触发回退；需区分 ??（空值检测）与 ||（真值检测）的语义差异。
vue 模板中空字符串 `””` 是 falsy 值，但 `??` 仅对 `null` 或 `undefined` 生效，因此 `”” ?? “fallback”` 会原样渲染空字符串，而非触发回退；需区分 `??`（空值检测）与 `||`（真值检测）的语义差异。
在 Vue.js 模板中使用空值合并运算符（??）时，开发者常误以为它会“捕获所有 falsy 值”（如 “”、0、false、NaN），从而提供默认内容。但事实并非如此：?? 的设计目标是专门处理“缺失值”（missing values），即仅当左侧操作数为 null 或 undefined 时才返回右侧操作数。空字符串 “” 虽为 JavaScript 中的 falsy 值，但它是一个合法的、已定义的字符串实例——既不等于 null，也不等于 undefined，因此 ?? 将其视为“有效值”并直接渲染。
例如：
<template> <div>{{ "" ?? "empty string is not truthy" }}</div> <!-- 渲染为空白（即 ""） --> <div>{{ null ?? "null is handled" }}</div> <!-- 渲染为 "null is handled" --> <div>{{ undefined ?? "undefined is handled" }}</div> <!-- 渲染为 "undefined is handled" --> </template>若你希望对所有 falsy 值（包括 “”、0、false 等）统一提供回退内容，应改用逻辑或运算符 ||：
<template> <div>{{ "" || "fallback for any falsy value" }}</div> <!-- 渲染为 "fallback for any falsy value" --> <div>{{ "hello" || "fallback" }}</div> <!-- 渲染为 "hello" --> <div>{{ 0 || "zero is falsy" }}</div> <!-- 渲染为 "zero is falsy" --> </template>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- || 会将 0、false、””、NaN 等所有 falsy 值都视为“需要回退”，在业务中需谨慎评估——例如，数字字段允许值为 0 时，误用 || 会导致数据丢失；
- 若仅需排除 null/undefined，同时保留 “”、0 等有效业务值，则 ?? 是更安全、语义更精确的选择；
- 在复杂场景中，推荐使用计算属性或方法封装判断逻辑，提升可读性与可维护性：
computed: { displayName() { return this.user.name ?? this.user.nickname ?? 'Anonymous' } }
总结：?? ≠ “falsy 合并”，而是 “nullish 合并”。理解这一根本区别，是写出健壮、意图明确的 Vue 模板表达式的关键。