Vue3里computed为啥不触发？这些坑你踩过没？

terry 2小时前阅读数 18 #SEO

文章标签 Vue3 computed

做Vue3项目时，你有没有遇到过这种情况：明明数据改了，计算属性（computed）却像“睡着了”一样没触发更新？明明按照文档写的代码，结果页面就是不跟着变，排查半天也找不出问题，别慌，这篇文章把computed不触发的常见原因和解决办法掰碎了讲，帮你避开这些开发里的“暗坑”。

依赖数据不是响应式的

Vue的响应式原理是靠reactive和ref实现数据劫持的，如果computed依赖的原始数据根本不是响应式的，Vue就没法“感知”到数据变化，自然不会触发computed更新。

举个例子：

// 错误写法：普通对象，非响应式
const user = { name: '张三', age: 18 }
const fullInfo = computed(() => `${user.name}今年${user.age}岁`)
function updateAge() {
  user.age = 19 // 这里修改普通对象，Vue感知不到
}

上面代码里，user是普通对象，没有被reactive或ref包装，修改user.age时，Vue的响应式系统收不到“数据变化”的通知，fullInfo也就不会更新。

解决办法：把普通数据变成响应式数据，用reactive包装对象/数组，用ref包装基本类型（字符串、数字、布尔等）：

// 正确写法：用reactive让对象响应式
const user = reactive({ name: '张三', age: 18 })
const fullInfo = computed(() => `${user.name}今年${user.age}岁`)
function updateAge() {
  user.age = 19 // 现在修改会触发响应式更新
}

要是用ref，注意访问时要加.value（<script setup>语法糖里若用defineRef会自动解包，但逻辑里操作仍要注意）：

const age = ref(18)
const birthYear = computed(() => 2024 - age.value) // 依赖age的响应式值

计算属性的依赖项“看似改了，实际没改”

有时候你觉得“数据改了”，但computed依赖的那个“具体值”其实没变化，这也会导致computed不触发，常见场景有这些：

场景A：修改的是“副本”而不是“原数据”

操作数组时，很多人习惯先复制一份再修改，结果改的是副本，原数组没变化：

const list = reactive([1, 2, 3])
const sum = computed(() => list.reduce((t, v) => t + v, 0))
function wrongUpdate() {
  let temp = [...list]
  temp.push(4) // 改的是temp副本，list没变化
}

这时候list本身没被修改，sum自然不会更新，得直接修改响应式数组：

function rightUpdate() {
  list.push(4) // 直接修改响应式数组，触发更新
}

场景B：对象的“深层属性”没被正确跟踪

Vue3的reactive对深层对象是自动响应式的，但如果手动替换了整个对象/数组，得确保新对象也是响应式的，比如用ref包装普通对象时，修改内部属性不会触发响应式（因为ref只对.value的“替换”做劫持，对内部属性的修改不管）：

const profileRef = ref({ name: '李四' })
const showNameRef = computed(() => profileRef.value.name)
function updateRef() {
  profileRef.value.name = '李四4.0' // 错误！profileRef.value是普通对象，修改name不会触发响应式
}

解决办法：把ref包装的对象改成reactive包装，或直接用reactive定义对象：

// 方法1：用reactive包装对象后再用ref
const profile = reactive({ name: '李四' })
const profileRef = ref(profile)
const showNameRef = computed(() => profileRef.value.name)
// 方法2：直接用reactive定义
const profile = reactive({ name: '李四' })
const showName = computed(() => profile.name)

错误把computed当可变数据修改

Computed的设计是“基于依赖的单向推导”，它本身是“只读”的（Vue3中，在setup里直接修改computed的返回值会报错；模板里错误绑定v-model到computed也会出问题）。

举个错误例子：

const count = ref(0)
const double = computed(() => count.value * 2)
function wrongModify() {
  double.value = 10 // 报错！computed是只读的，不能直接赋值
}

更隐蔽的情况是模板里给computed用v-model。

<template>
  <input v-model="fullName" /> <!-- 错误！fullName是computed，不能直接双向绑定 -->
</template>
<script setup>
const first = ref('张')
const last = ref('三')
const fullName = computed({
  get() { return first.value + last.value },
  set(val) { 
    // 若setter逻辑写错，也会导致更新异常
    const [f, l] = val.split('')
    first.value = f
    last.value = l
  }
})
</script>

如果fullName的setter逻辑写错（比如没正确更新依赖的first和last），就会导致computed看似没触发，所以若用了computed的setter，一定要确保在set里正确更新依赖的响应式数据。

闭包让依赖“断了线”

JavaScript的闭包特性，有时会让computed的依赖“固定”在某个快照里，导致后续数据变化时，computed无法感知。

看这个例子：

const count = ref(0)
function createComputed() {
  const localCount = count.value // localCount是count.value的“快照”，非响应式
  return computed(() => localCount + 1)
}
const result = createComputed()
function updateCount() {
  count.value = 5 // localCount还是0，result不会更新
}

这里createComputed里的localCount保存的是count.value的当前值（普通数字），后续count.value变化时，localCount不会跟着变，所以computed依赖的是localCount而非count，自然不会触发更新。

解决办法：让computed直接依赖响应式数据，别在闭包中存快照：

const count = ref(0)
function createComputed() {
  return computed(() => count.value + 1) // 直接依赖count的响应式值
}
const result = createComputed()
function updateCount() {
  count.value = 5 // 现在count变化，result会更新为6
}

setup语法糖里的ref/reactive用错了

Vue3的<script setup>语法糖让代码更简洁，但如果对ref和reactive的解包规则、作用域理解不清，也会导致computed不触发。

情况A：ref没正确访问.value

在<script setup>中，ref定义的变量在模板里会自动解包（不用写.value），但在<script>逻辑里必须写.value，如果在computed里忘记写，就会依赖“ref的包装对象”而非内部值：

const age = ref(18)
const birthYear = computed(() => 2024 - age) // 错误！age是ref对象，不是数值，应写age.value

情况B：reactive的“解构”导致响应式丢失

用对象解构把reactive的数据拆出来，解构后的变量就不是响应式的了：

const user = reactive({ name: '张三', age: 18 })
const { name, age } = user // 解构后name和age是普通字符串/数字，非响应式
const info = computed(() => `${name}的年龄是${age}`)
function updateUser() {
  user.age = 19 // 但name和age是快照，info不会更新
}

解决方法：要么不用解构，直接用user.name；要么用toRefs把reactive对象的属性转成ref（解构后仍是响应式）：

import { toRefs } from 'vue'
const user = reactive({ name: '张三', age: 18 })
const { name, age } = toRefs(user) // name和age现在是ref对象，响应式
const info = computed(() => `${name.value}的年龄是${age.value}`)

和watch配合时的逻辑误区

同时用watch和computed时，没理清两者的依赖关系和执行时机，也会导致computed不触发。

以为watch触发后computed一定更新，但其实要看computed的依赖是否真的变化，举个例子：

const list = reactive([1, 2, 3])
const sum = computed(() => list.reduce((t, v) => t + v, 0))
watch(sum, (newVal) => {
  console.log('sum变化了', newVal)
})
function addItem() {
  list.push(4) // sum从6变10，watch会触发
}
// 若watch的是其他数据，computed依赖没变化，则sum不更新：
const otherData = ref(0)
watch(otherData, () => {
  // 这里没修改list，sum的依赖没变化，所以sum不会更新
  console.log('otherData变了，但sum没动')
})

另一个误区是：在watch的回调里修改computed的依赖，却写反了逻辑，比如想让computed更新，却错误修改了无关数据，导致computed的依赖没变化。

解决思路：明确watch和computed的职责——computed是“数据推导”，watch是“响应式数据变化后的副作用”，若想让computed更新，必须确保它依赖的响应式数据真的变了；watch里的逻辑要围绕“触发副作用”写，别混淆两者的依赖关系。