Vue3里computed没响应？这些坑你踩过没？

做Vue3项目时,你有没有遇到过这种情况：明明用computed封装了计算逻辑，可依赖的数据变了，计算属性却完全没反应？明明代码看起来和文档示例差不多，咋就不按剧本走？今天咱们把computed“没响应”的常见坑挨个拆解，以后遇到这类问题心里有数～

为啥Vue3 computed突然没响应？先看依赖是不是“假响应式”

computed能自动更新，核心是依赖的响应式数据变化时，触发重新计算，但如果依赖的根本不是响应式数据，computed自然“感知”不到变化。

举个实际开发里常见的错误案例：

// 错误写法：count是普通变量，不是响应式
let count = 1  
const sum = computed(() => count + 1)  
function add() {  
  count++ // 普通变量修改，没触发响应式追踪  
}  

这时不管怎么调用add，sum都不会更新——因为count是普通变量，Vue的响应式系统（基于Proxy）根本“盯”不到它的变化。

正确做法：用ref或reactive把数据包成响应式，比如改成：

const count = ref(1)  
const sum = computed(() => count.value + 1)  
function add() {  
  count.value++ // 改ref的.value，触发响应式更新  
}  

ref会给基本类型数据加一层响应式包装，修改.value时Vue能检测到；reactive则是给对象/数组做响应式代理，修改对象属性时也能被追踪。

解构/赋值把响应式“弄丢”了？这是常见盲区

就算数据用reactive或ref包了，一旦操作不当（比如解构、单独赋值），响应式也会“溜走”，导致computed失去依赖。

案例1：reactive对象解构后，属性变普通值

const state = reactive({ num: 1 })  
// 解构后，num变成普通变量（丢失响应式）  
const { num } = state  
const double = computed(() => num * 2)  
function update() {  
  state.num = 2 // 改的是state.num，但double依赖的是普通变量num  
}  

这时update执行后，double不会更新——因为double依赖的num是解构出来的普通值，和state.num已经没关系了。

解决：别解构，直接用state.num访问：

const double = computed(() => state.num * 2)  

案例2：给响应式数据“拷贝”后丢失响应式

const list = reactive([1, 2, 3])  
let temp = list[0] // temp是普通数字，不是响应式  
const firstDouble = computed(() => temp * 2)  
function changeFirst() {  
  list[0] = 4 // 改list[0]，但temp没跟着变  
}  

temp只是list[0]的拷贝，后续list[0]变化时，temp还是旧值，导致firstDouble也不更新。要依赖响应式数据，就直接用原数据的访问方式。

computed里写了异步逻辑？同步追踪机制不买单

computed的设计是同步计算，内部如果有异步操作（比如async/await），会让响应式追踪“失效”。

看一个容易踩的反例：

const a = ref(1)  
const b = ref(2)  
// 错误：computed里用async，破坏响应式追踪  
const asyncSum = computed(async () => {  
  await new Promise(resolve => setTimeout(resolve, 100))  
  return a.value + b.value  
})  

这里asyncSum内部有await，当a或b变化时，computed不会重新执行——因为异步操作让Vue的依赖追踪在“等待”过程中中断了。

替代方案：如果需要异步逻辑，改用watch+ref组合。

const asyncSum = ref(0)  
watch([a, b], async ([newA, newB]) => {  
  await new Promise(resolve => setTimeout(resolve, 100))  
  asyncSum.value = newA + newB  
})  

这样数据变化时,watch会触发异步逻辑，再更新asyncSum。

计算属性自己写成“函数套函数”？语法细节踩坑

computed的语法是返回一个计算后的值，但如果不小心写成“返回函数”，就会变成“拿函数当值”，失去自动更新能力。

看个容易犯的错误：

const a = ref(1)  
const b = ref(2)  
// 错误：computed返回的是一个函数，不是计算后的值  
const sum = computed(() => {  
  return () => a.value + b.value  
})  
// 调用时：sum.value() 才会拿到结果，但a/b变化时，sum.value本身还是旧函数  

这时sum本质是个“函数的引用”，a或b变化时，sum不会自动更新（因为sum的“值”是函数，函数本身没变化）。

正确写法：直接返回计算结果，别嵌套函数：

const sum = computed(() => a.value + b.value)  

调试没思路？这几个小技巧快速定位问题

如果以上坑都排查过还没解决,可以用这些方法缩小范围：

检查数据是否真的“响应式”

用Vue提供的isReactive、isRef工具函数，确认依赖数据的响应式状态：

import { isReactive, isRef } from 'vue'  
console.log(isReactive(state)) // 看是否是reactive对象  
console.log(isRef(count)) // 看是否是ref对象  

如果返回false，说明数据没被正确包装成响应式，要补reactive/ref。

给computed加日志，看是否执行

在computed的回调里加console.log，观察数据变化时是否触发重新计算：

const sum = computed(() => {  
  console.log('sum重新计算了')  
  return a.value + b.value  
})  

如果数据变了但日志没打印,说明依赖没被正确追踪，回到前面的坑排查。

检查数据修改方式

• 用ref时，必须改.value（比如count.value++），直接改count没用；
• 用reactive时，必须改对象属性（比如state.num = 2），直接替换整个对象（state = { num: 2 }）会让旧代理失效。

computed没响应，核心是“依赖追踪”出问题

Vue3的computed能自动更新，全靠响应式数据变化时，触发computed重新计算，所以排查方向很明确：

1. 依赖的数据是不是真响应式？（普通变量、错误解构/赋值会让响应式丢失）
2. computed内部逻辑有没有破坏追踪？（异步操作、返回函数等）
3. 数据修改方式对不对？（ref忘写.value、reactive直接替换对象）

把这些点过一遍,基本能解决绝大多数computed“躺平不更新”的问题～下次遇到类似情况，按这个思路排查，效率会高很多～