Vue3里computed突然不触发更新？这些坑你踩过没？

terry 2小时前阅读数 21 #SEO

文章标签 Vue3；computed

做Vue3项目时，有没有遇到过这种情况：明明感觉数据改了，计算属性却纹丝不动？就像程序跟你玩“木头人”游戏，急得你抓头发，今天咱们把computed不触发更新的常见原因拆开来分析，以后遇到这类问题，直接“精准打击”~

依赖的数据压根不是响应式的，computed咋触发？

Vue3的响应式是靠ref和reactive实现的——只有被这两个API“包装”过的数据，变化时才会被Vue监测到，如果computed依赖的是普通变量，Vue根本不知道它变了，自然不会触发更新。

举个例子看错误示范：

// 普通变量，没被响应式包装
let normalCount = 0  
const wrongComputed = computed(() => normalCount + 1)  
function increment() {  
  normalCount++ // 这里修改普通变量，Vue感知不到  
}

点击按钮调用increment，normalCount确实变了，但wrongComputed完全没反应，因为普通变量不在Vue的响应式系统里。

怎么改才对？用ref或reactive把数据包起来：

// 用ref让数据变成响应式
const count = ref(0)  
const rightComputed = computed(() => count.value + 1)  
function increment() {  
  count.value++ // 修改ref的value，Vue能监测到变化  
}

要是处理对象、数组这类复杂数据，得用reactive：

const info = reactive({ name: '张三', age: 18 })  
const fullInfo = computed(() => `${info.name}今年${info.age}岁`)  
// 修改响应式对象的属性，computed会更新  
function growUp() {  
  info.age++  
}

还要注意“解构陷阱”：要是把响应式对象的属性解构出来当普通变量用，computed也会失效。

const info = reactive({ age: 18 })  
const { age } = info // age变成普通数字，脱离响应式  
const wrongAge = computed(() => age + 1)  
function growUp() {  
  info.age++ // info.age变了，但age还是原来的18，wrongAge不更新  
}

解决方法很简单：直接依赖响应式对象的属性，别用解构后的普通变量。

计算属性里掺了“副作用”操作，更新逻辑被打乱了

Vue设计computed是让它做纯函数——只根据依赖计算结果，不能有“副作用”（比如修改数据、操作DOM、发请求、定时器这些额外操作），一旦有副作用，轻则computed不更新，重则逻辑混乱甚至报错。

先看在computed里改数据的错误示范：

const count = ref(0)  
const badComputed = computed(() => {  
  count.value++ // 计算过程中修改依赖，相当于自己改自己的“输入”，逻辑乱套  
  return count.value  
})

这里badComputed每次被访问时都会触发count.value++，但因为修改操作干扰了依赖追踪，最终结果会失控（比如页面上显示的数值和预期完全对不上）。

再看在computed里操作DOM的错误示范：

const count = ref(0)  
const domComputed = computed(() => {  
  document.body.style.backgroundColor = count.value > 5 ? 'red' : 'blue' // 副作用，不属于计算逻辑  
  return count.value  
})

这种写法看似能实现“计数改背景色”，但DOM操作属于副作用，会让computed的依赖追踪失效，比如count从5变6时，背景色可能没变化，因为Vue没正确监测到这次修改的关联。

那该怎么处理副作用？把副作用逻辑丢给method或watch，比如要实现“计数改背景色”，用watch更合适：

const count = ref(0)  
watch(count, (newVal) => {  
  document.body.style.backgroundColor = newVal > 5 ? 'red' : 'blue'  
})

computed要像数学公式一样干净，输入（依赖）决定输出（计算结果），别掺额外操作。

错误理解computed缓存，手动绕开了响应式追踪

computed有缓存机制：只要依赖不变，就直接返回上次的结果，不重复计算，但如果我们在代码里“手动破坏”了依赖的响应式连接，缓存就会失效，或者依赖变化了Vue却没检测到。

情况1：依赖了“非响应式的中间变量”

const rawList = [1, 2, 3] // 普通数组，非响应式  
const list = reactive(rawList) // list是响应式，但rawList不是  
const wrongFilter = computed(() => {  
  return rawList.filter(item => item > 1) // 依赖的是rawList（普通数组）  
})  
function addItem() {  
  list.push(4) // list变了，但rawList没同步变，wrongFilter不更新  
}

这里wrongFilter依赖的是普通数组rawList，而list是rawList的响应式包装，当list变化时，rawList其实没变化（因为reactive是对原始对象的代理，不是深拷贝），所以wrongFilter感知不到变化。

解决办法很直接：直接依赖响应式数据，把代码改成list.filter(...)：

const list = reactive([1, 2, 3])  
const rightFilter = computed(() => list.filter(item => item > 1))  
function addItem() {  
  list.push(4) // list是响应式，变化时rightFilter会更新  
}

情况2：用闭包变量“偷偷藏数据”

function createComputed() {  
  let innerVal = 0 // 普通变量，非响应式  
  return computed(() => innerVal + 1)  
}  
const myComputed = createComputed()  
function updateInnerVal() {  
  innerVal++ // innerVal是闭包里的普通变量，Vue监测不到  
}

innerVal是闭包里的普通变量，修改它时Vue完全没反应，myComputed自然不更新。

怎么解决？把闭包变量改成响应式，用ref包起来：

function createComputed() {  
  const innerVal = ref(0) // 响应式变量  
  return {  
    computedVal: computed(() => innerVal.value + 1),  
    updateInnerVal() { innerVal.value++ } // 修改ref的value，触发更新  
  }  
}  
const { computedVal, updateInnerVal } = createComputed()

依赖嵌套太深或者有异步操作，响应式追踪“断档”了

情况1：computed依赖另一个computed，外层依赖失效

const count = ref(0)  
const double = computed(() => count.value * 2)  
// 假设这里normalNum是普通变量，非响应式  
const normalNum = 3  
const triple = computed(() => double.value * normalNum)  
function changeNum() {  
  normalNum = 4 // 普通变量，修改时double和triple都不更新  
}

triple依赖double和normalNum，但normalNum是普通变量，修改它时Vue监测不到，导致triple不更新。

解决方法：让所有依赖都变成响应式，把normalNum用ref包起来：

const normalNum = ref(3)  
const triple = computed(() => double.value * normalNum.value)  
function changeNum() {  
  normalNum.value = 4 // 修改ref的value，触发triple更新  
}

情况2：computed里用异步操作（async/await）

computed默认处理同步逻辑，如果返回Promise，Vue没法追踪异步回调里的依赖。

看个错误示范：

const userInfo = ref(null)  
const userFullName = computed(async () => {  
  if (!userInfo.value) return ''  
  const res = await fetchUser(userInfo.value.id) // 异步请求  
  return res.name + res.surname  
})  
function setUserId(id) {  
  userInfo.value = { id } // userInfo变化了，但userFullName里的异步逻辑没被正确追踪  
}

当userInfo变化时，userFullName里的异步函数不会重新执行，因为Vue没法在await后监测依赖变化。

怎么处理异步？用watch处理异步，再把结果给computed依赖：

const userInfo = ref(null)  
const fullName = ref('')  
// 用watch处理异步逻辑  
watch(userInfo, async (newVal) => {  
  if (newVal) {  
    const res = await fetchUser(newVal.id)  
    fullName.value = res.name + res.surname  
  }  
})  
// computed依赖响应式的fullName  
const userFullName = computed(() => fullName.value)  
function setUserId(id) {  
  userInfo.value = { id } // userInfo变化→watch触发→fullName更新→userFullName更新  
}

语法错误或作用域搞错了，computed“找不到北”

这类问题很基础，但稍不注意就会掉坑：

情况1：组合式API没正确导入`computed`

// 错误：没导入computed，用了全局的（不存在的）computed  
const myComputed = computed(() => count.value + 1)  
// 正确：从vue导入  
import { computed, ref } from 'vue'  
const count = ref(0)  
const myComputed = computed(() => count.value + 1)

情况2：选项式API里`computed`的`this`指向错误

// 错误：箭头函数导致this不是组件实例  
export default {  
  data() { return { count: 0 } },  
  computed: {  
    double: () => this.count * 2 // this是undefined或全局对象，不是组件  
  }  
}  
// 正确：用普通函数，this指向组件实例  
computed: {  
  double() { return this.count * 2 }  
}

情况3：setup里漏return，模板拿不到computed

// 错误：没把computed暴露给模板  
setup() {  
  const count = ref(0)  
  const double = computed(() => count.value * 2)  
  // 漏了return，模板里{{ double }} 是undefined  
}  
// 正确：return暴露  
setup() {  
  const count = ref(0)  
  const double = computed(() => count.value * 2)  
  return { double }  
}