Vue 3 计算属性不能处理异步请求，因其必须同步执行以维持响应式依赖追踪；正确做法是用 ref + onMounted/watch 承载异步逻辑，或封装为 useAsync 自定义 Hook。
Vue 3 的计算属性 不能直接处理异步请求，因为它本质上是同步、响应式、可缓存的派生值。一旦你试图在 computed 中写 async 或 await，它返回的就不再是最终数据，而是一个 Promise 对象——这会破坏 Vue 的响应式追踪机制，导致模板渲染出 [object Promise] 或根本无更新。
为什么 computed 必须是同步的？
Vue 的响应式系统依赖“立即执行 + 确定性返回”来建立依赖关系。当一个计算属性被访问时，Vue 需要立刻知道它依赖哪些响应式源（比如某个 ref），并将其加入依赖收集；如果里面夹杂异步逻辑，依赖链就无法在首次求值时完整建立，后续变更也无法触发正确更新。
简单说：计算属性不是“等结果”，而是“根据当前已知状态推导结果”。异步操作的结果在将来才确定，不在“当前状态”范围内。
正确做法：用 ref + 生命周期或 watch 承载异步逻辑
把异步请求从 computed 中剥离，改由 ref 或 reactive 存储状态，并在合适的时机（如 onMounted 或 watch）触发请求：
立即学习“前端免费学习笔记（深入）”；
- 定义
data = ref(null)、loading = ref(false)、error = ref(null) - 在
onMounted中调用fetchData()，把结果赋给data.value - 用另一个
computed基于data和loading返回格式化后的视图值（例如加载中 / 错误提示 / 处理后数据）
需要“响应式触发请求”？用 watch 更合适
当异步行为应随某个响应式变量变化而自动执行（比如搜索关键词变更后重新请求），watch 是比 computed 更自然的选择：
watch(searchTerm, async (newVal) => { if (newVal) data.value = await api.search(newVal) })- 支持
immediate: true实现首次加载 - 可配合
loading状态控制 UI 反馈
想封装得更简洁？考虑自定义 Hook
把重复的异步逻辑（请求、加载、错误、重试）抽成组合式函数，例如：
-
useAsync(apiFn)返回{ data, loading, error, execute } - 组件内调用
const { data, loading } = useAsync(fetchUser) - 再用
computed(() => loading.value ? '加载中' : data.value?.name || '')处理展示逻辑
