computed 不能做异步请求，因其是同步、惰性、带缓存的响应式机制，返回 Promise 会导致值始终 pending、破坏依赖追踪与缓存，且模板需同步值；应改用 watchEffect + ref 或 Pinia action 实现。
Vue 的 computed 本身不支持异步，强行在 getter 里写 async 或返回 Promise，会导致值始终是 pending 状态，模板无法正确读取结果，还会破坏依赖追踪和缓存机制。这不是“怎么处理”的问题，而是根本不能这么做。
为什么 computed 不能做异步请求
computed 是同步、惰性、带缓存的响应式求值机制：
- 它依赖响应式数据变化时自动重新执行 getter，并立即返回确定值
- 一旦返回 Promise，后续读取
.value拿到的永远是那个 Promise 实例，不是 resolved 后的数据 - 依赖变化时，scheduler 只会标记
dirty = true，不会重跑异步逻辑，也无法知道何时该更新缓存 - 模板渲染需要同步值，异步结果到来前视图空白或报错
替代方案：用 watchEffect + ref 组合
这是 Vue 官方推荐、语义清晰、可控性强的做法：
- 用
ref存储最终结果（如data = ref(null)、loading = ref(false)） - 用
watchEffect监听响应式依赖（如搜索关键词、ID），内部发起请求并手动赋值 - 配合
onInvalidate拦截过期请求，避免竞态覆盖
示例：
const result = ref(null)
const loading = ref(false)
watchEffect(async (onInvalidate) => {
if (!keyword.value.trim()) return
loading.value = true
const controller = new AbortController()
onInvalidate(() => controller.abort())
try {
const res = await fetch(`/api/search?q=${keyword.value}`, { signal: controller.signal })
result.value = await res.json()
} catch (e) {
if (e.name !== 'AbortError') console.error(e)
} finally {
loading.value = false
}
})
需要缓存结果？自己加一层逻辑
如果确实要复用上次成功结果（比如防抖后仍想保留旧数据），可以额外维护一个 cachedResult = ref(null)，并在请求失败或取消时不覆盖它。但注意：这不再是 computed 的缓存，而是业务层主动管理的状态，更灵活也更可控。
Pinia 场景下统一收口到 store action
若逻辑较重，建议移到 Pinia store 中：
- store 定义
searchResult = ref(null)和fetchSearch(keyword)action - action 内部做请求、错误处理、取消控制，并最终赋值给
searchResult - 组件中调用
store.fetchSearch(keyword)，同时用storeToRefs(store)解构searchResult保持响应式
这样既分离关注点，又避免多个组件重复实现竞态控制逻辑。
