Vue前端空值处理的实战指南与避坑记录

null           // 明确的“空值”，一般表示“这里有个位置，但现在没有值”
undefined      // 未定义，通常是“压根没传”、“没赋值”
''             // 空字符串
0              // 数字 0
false          // 布尔 false
NaN            // 不是一个合法数字

const value = 0;
const result = value || 100;
console.log(result); // 100，而不是 0

// 假设 user 可能是 null
const city = user.profile.address.city; 
// TypeError: Cannot read properties of null (reading 'profile')

const city =
  user &&
  user.profile &&
  user.profile.address &&
  user.profile.address.city;

const city = user?.profile?.address?.city;

<template>
  <div>
    <p>用户名：{{ user?.profile?.name || '未设置' }}</p>
    <p>城市：{{ user?.profile?.address?.city || '未知城市' }}</p>
  </div>
</template>
<script setup>
const user = ref(null);
// 后端请求完成后，再赋值
</script>

const value = 0;
const result = value || 100;
console.log(result); // 100

console.log(0 || 100);       // 100
console.log(0 ?? 100);       // 0

console.log('' || '默认');   // '默认'
console.log('' ?? '默认');   // ''

console.log(null || '默认'); // '默认'
console.log(null ?? '默认'); // '默认'

console.log(undefined || '默认'); // '默认'
console.log(undefined ?? '默认'); // '默认'

// 单价和数量来自接口
const price = item.price || 0;
const count = item.count || 1;
const total = price * count;

const price = item.price ?? 0;  // 价格缺失才用 0
const count = item.count ?? 1;  // 只有未传 count 才默认 1

function createDialog(options = {}) {
  const width = options.width ?? 400;         // 未传 width 才采用默认 400
  const closable = options.closable ?? true;  // 未传 closable 才用 true
}

<template>
  <div>
    <!-- 后端没给 nickName 时显示 '游客'，但如果是空字符串就保持空 -->
    <p>昵称：{{ user.nickName ?? '游客' }}</p>
  </div>
</template>

<template>
  <div>
    <!-- 假设 user.name 可能 undefined -->
    <p>用户名：{{ user.name }}</p>
  </div>
</template>

<p>用户名：undefined</p>

<template>
  <div>
    <p>用户名：{{ user?.name ?? '未设置' }}</p>
  </div>
</template>

function displayText(value, fallback = '--') {
  if (value === null || value === undefined) return fallback;
  return String(value);
}

<p>用户名：{{ displayText(user?.name, '未设置') }}</p>

<template>
  <div>
    <!-- 如果 amount 为 0，要显示 0 元，而不是 “--” -->
    <p>金额：{{ formatAmount(order?.amount) }}</p>
  </div>
</template>
<script setup>
function formatAmount(value) {
  if (value === null || value === undefined) return '--'; // 真空
  const num = Number(value);
  if (Number.isNaN(num)) return '--';                     // 非法数字
  return num.toFixed(2) + ' 元';
}
</script>

<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
<script setup>
const list = ref(null);
</script>

// 假设后端可能返回 { list: null }
interface ApiResponse<T> {
  list: T[] | null;
}
async function fetchUsers(): Promise<User[]> {
  const res: ApiResponse<User> = await request('/api/users');
  return res.list ?? [];
}

const users = ref<User[]>([]);
onMounted(async () => {
  users.value = await fetchUsers(); // 一定是数组
});

if (user && user.profile && user.profile.address && user.profile.address.city) {
  showCity(user.profile.address.city);
} else {
  showDefaultCity();
}

const city = user?.profile?.address?.city;
if (city) {
  showCity(city);
} else {
  showDefaultCity();
}

const rawCity = user?.profile?.address?.city;
const city = rawCity?.trim(); // string 或 undefined
if (!city) {
  showDefaultCity();
} else {
  showCity(city);
}

// 1. 访问深层属性不做保护
const city = user.profile.address.city;
// 2. 用 || 做默认值
const price = item.price || 0;
const count = item.count || 1;
// 3. 列表用 null 表示“还没加载”
const list = ref(null);

// 1. 使用可选链保护
const city = user?.profile?.address?.city;
// 2. 用 ?? 严格处理 null/undefined
const price = item.price ?? 0;
const count = item.count ?? 1;
// 3. 列表统一用 [] 作为初始值
const list = ref([]);

<template>
  <div>
    <p>用户名：{{ user?.name ?? '未设置' }}</p>
    <p>年龄：{{ user?.age ?? '--' }}</p>
    <p>余额：{{ formatAmount(account?.balance) }}</p>
    <ul v-if="orders.length">
      <li v-for="order in orders" :key="order.id">
        订单号：{{ order.id }}，金额：{{ formatAmount(order.amount) }}
      </li>
    </ul>
    <p v-else>暂无订单</p>
  </div>
</template>
<script setup>
const user = ref(null);
const account = ref(null);
const orders = ref([]); // 一定是数组
function formatAmount(value) {
  if (value === null || value === undefined) return '--';
  const num = Number(value);
  if (Number.isNaN(num)) return '--';
  return num.toFixed(2) + ' 元';
}
</script>

<p>环比：{{ growthRate || '--' }}%</p>

<p>环比：{{ growthRate ?? '--' }}{{ growthRate === null || growthRate === undefined ? '' : '%' }}</p>

function displayPercent(value) {
  if (value === null || value === undefined) return '--';
  return `${value}%`;
}

<p>环比：{{ displayPercent(growthRate) }}</p>

user.profile.address.city

const city = user?.profile?.address?.city;

interface UserViewModel {
  city?: string;
  // ...
}
function mapUserDtoToViewModel(dto: any): UserViewModel {
  const profile = dto.profile || dto.info || {};
  return {
    city: profile.address?.city,
    // ...
  };
}

<p>城市：{{ user.city ?? '未知城市' }}</p>

interface UserDto {
  id?: number;
  name?: string;
  age?: number | null;
  address?: {
    city?: string;
  } | null;
}

interface UserViewModel {
  id: number;
  name: string;
  age: number | null;   // 业务上允许为 null
  city: string;         // 至少有兜底
}
function toUserViewModel(dto: UserDto): UserViewModel {
  return {
    id: dto.id ?? 0,                         // 或抛错，看业务
    name: dto.name ?? '未命名用户',
    age: dto.age ?? null,
    city: dto.address?.city ?? '未知城市',
  };

<p>用户名：{{ user.name }}</p>
<p>城市：{{ user.city }}</p>