计算属性不适合放异步逻辑，因其 getter 必须同步返回响应式依赖的确定值，而异步操作无法立即完成、不被 vue 响应式系统追踪，且返回 promise 会导致模板渲染异常和缓存失效。
计算属性本身不能直接处理异步请求，因为它设计初衷是同步、响应式、可缓存的派生值。一旦你在 computed 中发起 axios.get 或 await 操作，它不会等待响应，也不会自动更新视图——反而会返回 Promise 对象或 undefined，导致模板渲染异常。
为什么计算属性不适合放异步逻辑？
计算属性的 getter 函数必须立即返回一个值，且该值需依赖响应式数据（如 data、props、store state）。而异步操作（如 API 调用）无法“立即返回结果”，它的完成时间不可控，也不属于 Vue 的响应式追踪体系。
- Vue 不会监听 Promise 的 resolve/reject，所以 computed 不会因异步结果就重新求值
- 即使你写成
async getItems() { return await api.get() }，这个计算属性实际返回的是 Promise 实例，而非数据，模板里显示的就是[object Promise] - 计算属性的缓存机制会“记住”第一次执行时返回的 Promise，后续访问不会重发请求，也无法反映真实数据状态（加载中/成功/失败）
常见误用示例及问题
下面这种写法看似简洁，实则无效：
computed: {
async userList() {
const res = await axios.get('/api/users')
return res.data
}
}
结果是：userList 始终是 pending 状态的 Promise，模板无法正确渲染列表，且无错误提示。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
正确的替代方案
把异步请求移出 computed，放到生命周期钩子或组合式 API 的 setup 中，并用响应式变量承接结果：
-
Options API：在
created或mounted中调用请求，结果存入data，再用计算属性做二次加工（比如过滤、排序） -
Composition API（Vue 3）：用
onMounted+ref/reactive管理异步数据；需要派生逻辑时，再用computed基于已加载的数据做计算 - 若需封装复用逻辑，推荐使用
composable（如useAsyncData），内部管理 loading/error/data 状态，对外暴露响应式变量
什么时候可以用计算属性“配合”异步？
仅限对已加载完成的异步数据进行派生处理。例如：
data() {
return {
users: [], // 异步获取后赋值
loading: false
}
},
computed: {
activeUsers() {
return this.users.filter(u => u.status === 'active') // ✅ 安全：users 是响应式数组
},
userCount() {
return this.users.length // ✅ 安全：依赖响应式数据，自动更新
}
}
这里的计算属性没发起请求，只消费已有响应式数据——这才是它的本职工作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
