在 vue 的计算属性中直接使用 await 是无效的，因为计算属性必须是同步的。正确的做法是将异步逻辑封装在 methods 或 watchers 中，并通过一个响应式的 ref 变量来存储结果，然后在模板中渲染该变量。
为什么计算属性不能直接返回 Promise
计算属性的 getter 函数在每次依赖项变化时会被立即执行并返回一个值。如果在这个函数里写 await，它实际上会返回一个未完成的 Promise 对象，而不是你期望的数据。Vue 无法自动解包这个 Promise，导致模板渲染出 [object Promise] 或者空白。因此，必须将异步操作移出计算属性，改用 watch 监听源数据的变化，在回调中处理异步请求并更新状态。
import { ref, watch } from 'vue';
export default {
setup() {
const sourceId = ref(1);
const resultData = ref(null);
// 模拟异步获取数据
const fetchData = async (id) => {
const response = await fetch(`/api/data/${id}`);
return response.json();
};
// 监听 sourceId 变化
watch(sourceId, async (newId) => {
try {
resultData.value = await fetchData(newId);
} catch (error) {
console.error('Fetch failed', error);
resultData.value = null;
}
}, { immediate: true });
return { sourceId, resultData };
}
}上述代码展示了标准的组合式 API 写法。当 sourceId 改变时，watch 触发异步请求，并将结果赋值给 resultData。模板中可以直接使用 <div>{{ resultData }}</div>，Vue 会在数据加载完成后自动更新视图。
立即学习“Java免费学习笔记（深入）”；
如何在模板中安全地展示异步结果
由于异步请求需要时间，resultData 初始值为 null。在模板中直接访问其属性会导致运行时错误。最佳实践是使用可选链操作符 ?. 或者条件渲染来处理这种不确定性。这样可以确保在数据尚未加载完成时，页面不会崩溃，而是显示加载状态或占位符。
<template>
<div v-if="!resultData">Loading...</div>
<div v-else>
<p>Name: {{ resultData.name }}</p>
<p>Value: {{ resultData.value }}</p>
</div>
</template>这段模板代码通过 v-if 判断 resultData 是否存在。如果为 null，显示 Loading 提示；否则渲染具体字段。这种方式比在 JS 中做大量判空更简洁，且符合 Vue 的声明式渲染理念。对于复杂对象，也可以结合 computed 对已加载的数据进行二次加工，但核心数据源仍需来自 watch 或 setup 中的响应式变量。
基于 resultData 为空时的具体处理问题
当 resultData 为 null 或 undefined 时，直接访问其深层属性会抛出 TypeError。例如 resultData.user.profile.age 在数据未就绪时会中断执行。解决这个问题的关键在于确保模板中所有对异步数据的访问都具备防御性。可以使用 v-if 包裹整个数据块，或者在表达式中使用 && 短路求值。例如 <span>{{ resultData && resultData.name }}</span>。虽然这能避免报错，但会让模板变得冗长。推荐使用 Vue 3 的可选链 {{ resultData?.name }}，它在底层会自动检查左侧对象是否为空，若为空则返回 undefined 而不报错，从而保持模板的整洁与安全。
