不能在 computed 中处理异步请求或副作用，因其要求纯净性；应改用 watch、ref 手动更新或自定义 Hook。
不能在 computed 里安全地处理异步请求或副作用。
Vue 3 的 computed 是为派生、缓存、同步计算而设计的。它依赖纯净性（pure function）：给定相同输入，返回相同输出，且不修改外部状态、不发起请求、不操作 DOM、不设定时器、不写 localStorage。一旦违反，就会触发警告 Unexpected side effect in computed function，并可能引发以下问题：
- 缓存失效，重复执行副作用（比如多次发请求）
- 依赖追踪错乱，视图更新不及时或错误
- 异步结果无法响应式更新（
computed不等待 Promise） - SSR 渲染时出错（服务端无
window/localStorage等）
✅ 正确做法：用 watch 或组合式逻辑替代
1. 需要“响应数据变化后发起请求” → 用 watch
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 })✅
watch明确用于副作用，支持异步、错误处理、加载状态，且可配置immediate、deep、flush等行为。
2. 需要“计算后再触发动作” → 先 computed 派生，再 watch 响应
const searchQuery = ref('')
const filterPattern = computed(() => searchQuery.value.trim())
// 只在 pattern 实际变化时才请求（自动去抖可额外加）
watch(filterPattern, async (pattern) => {
if (!pattern) return
results.value = await search(pattern)
})✅ 分离关注点：
computed负责干净转换，watch负责执行动作。立即学习“前端免费学习笔记（深入）”；
3. 需要“模板中显示异步结果” → 用 ref + 手动更新（配合 onMounted 或 watch）
const post = ref(null)
const loading = ref(false)
// 不要用 computed(() => { fetch().then(...) }) —— 错误！
// 正确：在 setup 或事件中更新 ref
async function loadPost(id) {
loading.value = true
try {
post.value = await fetchPost(id)
} finally {
loading.value = false
}
}✅ 模板中直接使用
post和loading，清晰可控。
❌ 常见错误写法（务必避免）
const data = computed(async () => await api.get()) // ❌ computed 不等 Promise
const list = computed(() => { localStorage.setItem('cache', JSON.stringify(items.value)) // ❌ 副作用 return items.value.filter(...) })const total = computed(() => { setTimeout(() => console.log('delay'), 100) // ❌ 定时器副作用 return cart.value.reduce((a, b) => a + b.price * b.count, 0) })
? 补充建议
-
如果需要封装“带加载态的异步计算”，可封装自定义 Hook：
function useAsyncComputed(getter, options = {}) { const data = ref(null) const error = ref(null) const loading = ref(false) watchEffect(async (onInvalidate) => { loading.value = true try { const result = await getter() onInvalidate(() => {}) // 可选取消逻辑 data.value = result } catch (e) { error.value = e } finally { loading.value = false } }) return { data, error, loading } }注意：这不是
computed，而是基于watchEffect的语义封装，更贴近需求本质。 模板中避免逻辑过重，优先用
computed做过滤、格式化、组合；副作用一律交给watch、生命周期钩子或事件处理器。
不复杂但容易忽略。
