Vue3中如何在访问ref()值前执行空值检查？

针对你的场景，这里提供几种不同的空值检查方案，适配不同的业务需求：

1. 直接在参数层面处理空值 #

利用可选链运算符（?.）和空值合并运算符（??），确保传给getFullName的参数不会是undefined或null，避免函数报错：

const summaryItems = ref({
  title: "Model Summary",
  items: {
    "Model Owner": getFullName(modelInfo?.value?.model_owner ?? ''),
  },
});

如果modelInfo、modelInfo.value或modelInfo.value.model_owner任意一环为空，就会传入空字符串给getFullName，你可以根据getFullName的逻辑调整默认值（比如改成'Unknown'）。

2. 用computed实现响应式空值检查 #

如果modelInfo是异步获取的（比如接口返回后才赋值），推荐用computed替代直接初始化ref，这样能自动响应modelInfo的变化，同时做完整的空值判断：

const summaryItems = computed(() => ({
  title: "Model Summary",
  items: {
    "Model Owner": modelInfo.value ? getFullName(modelInfo.value.model_owner) : '',
  },
}));

当modelInfo.value存在时，调用getFullName；否则显示空字符串，而且summaryItems会随modelInfo的更新自动刷新。

3. 手动初始化+后续更新 #

如果不需要响应式自动更新，也可以先给summaryItems设默认值，等modelInfo有值后再手动修改：

const summaryItems = ref({
  title: "Model Summary",
  items: {
    "Model Owner": '',
  },
});

// 同步场景下直接检查赋值
if (modelInfo.value) {
  summaryItems.value.items["Model Owner"] = getFullName(modelInfo.value.model_owner);
}

// 异步场景下用watch监听变化
watch(modelInfo, (newVal) => {
  summaryItems.value.items["Model Owner"] = newVal ? getFullName(newVal.model_owner) : '';
}, { immediate: true });

这种方式适合需要手动控制更新时机的场景，比如需要等待多个依赖项都准备好再赋值。

内容的提问来源于stack exchange，提问作者code-8