Vue中计算属性为啥没随数据变化而更新？

东方俊凤提问于 2026-03-05 14:41:20 阅读 8

框架

我在用 Vue 3 写一个购物车功能，定义了一个 computed 计算总价，但当我修改商品数量时，总价没变。明明依赖的数据变了啊？我试过把计算逻辑直接放到 methods 里调用，倒是能更新，但听说 computed 有缓存更高效，所以还是想用它。

这是我的代码：

<script setup>
import { ref, computed } from 'vue'

const items = ref([
  { name: '苹果', price: 5, count: 2 }
])

const total = computed(() => {
  return items.value.reduce((sum, item) => sum + item.price * item.count, 0)
})

// 修改数量的函数
function updateCount(index, newCount) {
  items.value[index].count = newCount
}
</script>

是不是我对响应式理解有问题？为什么 computed 没有重新计算？

我来解答赞 1 收藏

反馈

1 条解答

玉轩 Lv1

啊这...你这是直接修改了对象的属性，Vue监听不到。用items.value[index] = {...items.value[index], count: newCount}替换整个对象才行。

或者更简单点，改成这样：

function updateCount(index, newCount) {

  items.value[index].count = newCount

  items.value = [...items.value] // 强制触发响应

}

困死了...我去续杯咖啡...

2026-03-05 15:06