Vue3里computed突然不工作？这些坑你踩过没？

写Vue3项目时，有没有遇到过这种情况：明明写了computed计算属性，数据却死活不更新？页面显示还是旧值，控制台也没报错，急得抓头发……别慌！这篇文章把computed不工作的常见原因扒得明明白白，看完少踩坑～

响应式数据没“被追踪”，computed抓不到依赖

Vue的computed能自动更新，靠的是响应式依赖追踪：computed函数里用到的响应式数据变化时，Vue会自动重新计算，但如果数据本身不是响应式的，computed根本“看不到”变化，自然不会更新。

场景1：用了普通变量，没包ref/reactive

比如想做个“数值翻倍”的计算属性：

// 错误写法：count是普通变量，不是响应式
let count = 0  
const double = computed(() => count * 2)  
function add() {
  count++ // 这里修改普通变量，computed感知不到
}

点击按钮执行add()，count确实变了，但double不会更新——因为count不是响应式数据，Vue没法追踪它的变化。

解决方法：用ref把基本类型包成响应式：

const count = ref(0) // count变成响应式，.value是实际值
const double = computed(() => count.value * 2)  
function add() {
  count.value++ // 修改.value，触发响应式更新
}

场景2：解构响应式对象时，丢了响应式

如果用reactive定义对象/数组，直接解构会丢失响应式！

const state = reactive({ a: 1, b: 2 })  
// 错误：解构后a、b变成普通值，不是响应式
const { a, b } = state  
const sum = computed(() => a + b)  
function update() {
  state.a = 3 // 这里修改state.a，sum却不更新！
}

因为解构后a和b是普通变量，和state的响应式断开了，computed里的a + b不再追踪state.a的变化。

解决方法：用toRefs解构，保留响应式：

import { toRefs } from 'vue'  
const state = reactive({ a: 1, b: 2 })  
const { a, b } = toRefs(state) // a、b变成ref，.value是响应式的  
const sum = computed(() => a.value + b.value)  
function update() {
  state.a = 3 // 现在sum会自动更新为3 + 2 = 5
}

场景3：操作数组/对象时，没触发响应式（进阶坑）

Vue3对响应式的处理已经很友好，但有些“非常规操作”还是会丢响应式：

• 给对象加新属性：如果对象是reactive的，直接加新属性默认是响应式的（Vue3优化了这一点），但如果是ref包裹的对象，要改.value里的属性。
• 修改数组索引：Vue3里直接改state.list[0] = '新值'是响应式的，不用再像Vue2那样用$set。

但如果是更复杂的场景（比如动态添加大量属性），建议用reactive包裹对象，或提前定义好所有可能的属性，避免后续“意外”。

computed里忘记返回值，等于白忙活

computed的核心是“返回一个计算后的值”，如果函数体里只做了计算，没return，计算属性就没有有效值，页面自然没变化。

看个错误例子：

const firstName = ref('张')  
const lastName = ref('三')  
// 错误：函数里计算了，但没return
const fullName = computed(() => {  
  const first = firstName.value  
  const last = lastName.value  
  first + last // 这里少了return！
})  

页面上用{{ fullName }}渲染，结果是undefined——因为computed函数没返回值，等于白写。

解决方法：一定要return计算结果：

const fullName = computed(() => {  
  const first = firstName.value  
  const last = lastName.value  
  return first + last // 加上return！
})  

把computed当方法用，误解“缓存”导致“不更新”错觉

computed有缓存特性：只要依赖的响应式数据不变，computed就不会重新计算，但很多人把它当“每次调用都执行”的方法用，结果发现“不更新”，其实是用法错了。

场景：想要“每次触发都随机”，却用了computed

// 错误：Math.random()不是响应式依赖，computed只会计算一次
const randomNum = computed(() => Math.random())  
function refresh() {
  // 以为调用refresh会让randomNum变化，实际不会！
}

页面上显示randomNum，刷新页面后数值一直不变——因为Math.random()不是响应式数据，computed只会在初始化时计算一次，之后不再执行。

解决方法：分清computed和method：

• 如果需要“依赖变化时自动更新”，用computed（比如购物车总价，依赖商品数量/价格）。
• 如果需要“每次调用都重新计算”，用method（比如生成随机数、格式化时间）。

改成method的写法：

function randomNum() {  
  return Math.random()  
}  
// 页面上用{{ randomNum() }}，每次渲染都会执行

在computed里搞异步，等于“无效操作”

computed是同步计算的，不能直接放异步逻辑（比如发请求、用async/await），否则返回的是Promise，页面根本没法正确渲染。

看个错误例子：

// 错误：computed里用async，返回Promise
const userInfo = computed(async () => {  
  const res = await fetch('/api/user')  
  return res.data.name  
})  

页面上渲染userInfo，结果是[object Promise]——因为computed无法自动解包Promise，异步逻辑在这里完全无效。

解决方法：用watch+ref处理异步：

const userInfo = ref('') // 用ref存结果  
watch([userId], async (newId) => {  
  const res = await fetch(`/api/user/${newId}`)  
  userInfo.value = res.data.name  
}, { immediate: true }) // 组件加载时立即执行

这样，当userId变化时，自动发请求更新userInfo，逻辑更清晰。

被Vue3实验性特性“ reactivityTransform ”坑了

Vue3有个实验性语法糖reactivityTransform（比如用声明响应式变量，不用写.value），如果项目里开了这个特性，但写法没跟上，computed的依赖可能直接失效。

场景：开启 reactivityTransform 后，依赖追踪丢了

比如Vite配置里开了实验性特性：

// vite.config.js
export default defineConfig({  
  plugins: [vue()],  
  vue: {  
    reactivityTransform: true // 开启实验性语法糖
  }  
})  

然后代码里用了新语法，但没正确声明响应式变量：

// 错误：开启 reactivityTransform 后，要用$$()声明响应式
let count = 0 // 普通变量，不是响应式  
const double = computed(() => count * 2)  
function add() {  
  count++ // computed感知不到变化
}

解决方法：要么关闭实验性特性（新手推荐，稳定优先），要么用新语法正确声明：

// 正确：用$$()声明响应式变量
let count = $$(0)  
const double = computed(() => count * 2)  
function add() {  
  count++ // 现在count是响应式，double会自动更新
}

（注：reactivityTransform还没稳定，项目里非必要不建议开，避免踩语法糖的坑。）

解决computed不工作，抓准核心逻辑

其实computed“不工作”，本质是没搞懂响应式依赖追踪和computed的设计逻辑，记住这几点：

• 数据要响应式：用ref/reactive包基本类型/对象，解构响应式对象用toRefs。
• computed要return：函数体必须返回计算结果，否则没值。
• 分清computed和method：需要缓存+自动更新用computed，需要每次执行用method。
• 别在computed里搞异步：异步逻辑丢给watch/onMounted+ref处理。
• 慎用实验性特性：reactivityTransform没稳定，新手先关了它。

遇到问题时，先检查“依赖的数据是不是响应式”，再看“computed写法对不对”，大部分坑都能解决～要是还不行，把代码拆出来单独测试依赖和计算逻辑,逐步排查准没错～