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：

立即学习“前端免费学习笔记（深入）”；

const totalCount = computed(() => {
  return cartItems.value.reduce((sum, item) => sum + (item.quantity || 0), 0)
})

注意：item.quantity || 0 防止空值或 undefined 导致 NaN；reduce 初始值设为 0 很关键。

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

用 computed 计算总价

同样用 reduce，但每项贡献的是 price × quantity：

const totalPrice = computed(() => {
  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 会自动重新求值。