计算属性不能处理异步请求，因其必须同步执行以维持响应式依赖追踪和缓存机制；正确做法是用ref+onMounted/watch管理异步逻辑，再通过computed派生已加载的数据。
计算属性本身不能直接处理异步操作，它不支持返回 Promise，也不在内部执行 await。一旦你在 computed 中写异步逻辑（比如 async () => { await fetch(...) }），它不会按预期更新视图，反而可能返回一个 pending 状态的 Promise，甚至引发“xxx is not a function”等运行时错误。
为什么 computed 不能异步
计算属性的核心机制是响应式依赖追踪 + 同步缓存求值。Vue 在 getter 执行时会自动收集它访问过的响应式数据（如 ref.value、reactive 的属性），并建立依赖关系。但 Promise、async 函数本身不是响应式数据，也不会触发依赖更新；computed 无法监听 Promise 的 resolve 结果，也无法等待它完成后再缓存值。
常见误用示例：
-
computed(() => { return new Promise(...) })→ 返回 Promise 对象，模板中显示[object Promise] -
computed(async () => { return await api.getData() })→ getter 被当作同步函数调用，实际返回的是 Promise，且后续 resolve 不会触发重新计算
替代方案：用 ref + onMounted 或 suspense
真正需要“等待异步完成再使用结果”的场景，应交由响应式变量（ref 或 reactive）承载数据，并配合生命周期或组合式 API 控制流程：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 在
onMounted或onBeforeMount中发起请求，赋值给ref，再在模板中直接使用该 ref - 用
suspense包裹子组件，配合defineAsyncComponent或组件内async setup（Vue 3.4+ 支持）统一处理加载/错误状态 - 对异步结果做二次加工（如过滤、排序），可定义为新的 computed，但它的依赖必须是已 resolved 的 ref 值，例如：
computed(() => listRef.value.filter(...))
需要异步副作用？用 watch 替代
如果你的目的是“当某个响应式数据变化时，触发一次异步操作（如保存、校验、拉取关联数据）”，那应该用 watch：
watch(searchTerm, async (newVal) => { const res = await searchAPI(newVal); results.value = res; })- watch 明确支持异步回调，且能控制执行时机（
immediate、flush）、取消重复请求（借助AbortController或 cancel 令牌）
小技巧：模拟“异步 computed”的安全写法
若想保持代码结构清晰，可封装一个组合函数，内部管理 loading、error、data 状态，对外暴露 ref：
- 例如：
const { data, loading, error } = useAsyncData(() => api.fetchUser(id.value)) - 然后
computed(() => data.value?.name || '—')就是安全、可缓存的派生逻辑
这类封装本质仍是基于 ref 的状态管理，不是让 computed 变异步，而是让它消费异步完成后的稳定值。
