Vue中应更新计算属性对象还是原始响应式数组？

核心原因 #

1. computed属性的只读特性：Vue的computed()默认返回只读的响应式引用，它的更新完全依赖于关联的依赖项（此处为cart.value）。直接修改computedCartItems.value内的元素，不会触发响应式更新——这违背了computed“基于依赖派生数据”的设计逻辑。
2. map生成独立对象数组：computed中通过map生成的computedCartItems是全新数组，数组内的每个对象是原cart项的浅拷贝。对于amount这类基本数据类型，拷贝后的值与原对象的amount是完全独立的——修改这个拷贝值不会影响原cart数组的元素，自然也不会触发computed的重新计算。

解决方案 #

始终修改原始响应式数据源（即cart数组），因为computed是基于它派生的，修改原始数据会自动触发computed重新计算，同步更新视图和派生数据。

优化建议：封装修改逻辑到组合式函数 #

把修改购物车数量的逻辑封装在useCart中，既符合组合式函数的封装原则，也避免组件直接操作原始数据出错：

优化后的useCart.js

const useCart = () => {
    const cart = ref([])

    const computedCartItems = computed(() => {
        return cart.value.map(cartItem => {
            return {
                ...cartItem,
                totalPrice: cartItem.amount * cartItem.price
            }
        })
    })

    // 封装增加数量的方法
    const incrementAmount = (id) => {
        const targetItem = cart.value.find(item => item.id === id)
        if (targetItem) {
            targetItem.amount++
        }
    }

    return {
        computedCartItems,
        incrementAmount
    }
}

export default useCart

对应index.vue

<div v-for="cartItem in computedCartItems" :key="cartItem.id">
    <div>{{ cartItem.name }}</div>
    <div>总价：{{ cartItem.totalPrice }}</div>
    <button @click="incrementAmount(cartItem.id)">+</button>
</div>

<script setup>
const { computedCartItems, incrementAmount } = useCart()
</script>

原代码对比解释 #

• 无效代码：修改的是computedCartItems返回的新对象的amount，这个值与原cart数组无关，无法触发响应式更新，视图自然无变化。
• 有效代码：直接修改cart数组内元素的amount，cart是响应式ref，修改后会触发依赖它的computedCartItems重新计算，同步更新totalPrice和视图。

内容的提问来源于stack exchange，提问作者Miguel Stevens