Vue 3 中用 computed 实现购物车总价和总数量，核心是监听响应式 cartItems 数组变化并实时聚合计算；totalCount 累加 quantity，totalPrice 计算 price×quantity，均做数值安全处理，模板中直接使用即可自动更新。
Vue 3 中用 computed 实现购物车总价和总数量，核心是监听购物车商品数组的变化，并实时聚合计算。只要商品列表（如 cartItems）是响应式数据，computed 就会自动更新。
定义响应式购物车数据
先确保购物车数据是响应式的，推荐使用 ref 或 reactive：
- 用
ref：适合简单数组或需要解构/重赋值的场景 - 用
reactive：适合嵌套结构较多、操作频繁的对象
例如：
const cartItems = ref([{ id: 1, name: 'iPhone', price: 5999, quantity: 2 },
{ id: 2, name: 'AirPods', price: 1299, quantity: 1 }
])
用 computed 计算总数量
遍历 cartItems.value，累加每个商品的 quantity：
return cartItems.value.reduce((sum, item) => sum + (item.quantity || 0), 0)
})
注意：item.quantity || 0 防止空值或 undefined 导致 NaN；reduce 初始值设为 0 很关键。
用 computed 计算总价
同样用 reduce，但每项贡献的是 price × quantity：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
return cartItems.value.reduce((sum, item) => {
const price = Number(item.price) || 0
const qty = Number(item.quantity) || 0
return sum + price * qty
}, 0)
})
这里做了数值安全处理，避免字符串价格（如 "5999"）参与乘法出错；也可配合 toFixed(2) 控制小数位，但注意返回的是字符串，如需 number 类型建议用 parseFloat 包裹。
模板中直接使用
在模板里像普通响应式变量一样使用即可，无需调用函数：
共 {{ totalCount }} 件商品
总计：¥{{ totalPrice.toFixed(2) }}
只要 cartItems 中任意商品的 price 或 quantity 被修改（且是响应式更新），totalCount 和 totalPrice 会自动重新求值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
