Vue 3 的 computed 不支持异步操作，因其必须同步、纯净、无副作用；否则会触发警告并导致缓存错乱、渲染异常；推荐用 watch + ref 管理异步逻辑，或封装 useAsyncComputed。
Vue 3 的 computed 不能直接处理异步请求返回的数据。它设计上必须是同步、纯净、无副作用的——也就是说，computed 函数里不能 await、不能发请求、不能修改外部状态，否则会触发警告 Unexpected side effect in computed function，并导致缓存错乱、视图更新异常甚至 SSR 失败。
为什么 computed 不支持异步
• 缓存机制失效：computed 第一次读取返回一个 Promise，第二次读取依赖没变，却无法复用“已解析的结果”，只能再返回一个新的 Promise
• 模板渲染需要同步值：Vue 在渲染时直接读取 .value，遇到 Promise 就会显示 [object Promise] 或 undefined
• 依赖追踪不可靠：异步完成时间不确定，期间依赖可能多次变更，无法保证最终赋值对应哪次触发
正确替代方案：用 watch + ref 手动管理
这是 Vue 官方推荐、项目中最常用也最可控的方式：
- 用
ref存储异步结果（如user = ref(null)）和加载状态（如loading = ref(false)） - 用
watch监听响应式源（如userId），在回调中执行async/await请求 - 手动赋值给 ref，并用
try/finally控制 loading 状态
示例：
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
import { ref, watch } from 'vue'import { fetchUser } from '@/api'
const userId = ref(1)
const user = ref(null)
const loading = ref(false)
watch(userId, async (newId) => {
if (!newId) return
loading.value = true
try {
user.value = await fetchUser(newId)
} finally {
loading.value = false
}
}, { immediate: true })
进阶：先计算再触发请求（分离关注点）
当请求参数需要加工（比如去空格、拼接、过滤），推荐把转换逻辑放在 computed，再让 watch 响应这个加工后的值：
-
searchQuery = ref('')是原始输入 -
filterPattern = computed(() => searchQuery.value.trim())负责干净转换 -
watch(filterPattern, async (p) => { if (p) results.value = await search(p) })只在真正有变化时发起请求
这样既利用了 computed 的缓存和响应式追踪能力，又把副作用（请求）交给 watch 承担。
可选：封装 useAsyncComputed 组合式函数
如果你频繁需要“类 computed 风格”的异步逻辑，可以引入社区成熟的 useAsyncComputed（如 loilo 的实现），它内部用 watchEffect + ref + 取消机制封装了防抖、竞态取消、加载态等细节。但要注意：它返回的不是真正的 computed，而是一个包含 value 和 evaluating 的 tuple，本质仍是基于 ref 的手动管理。
