Vue 3 中监听购物车数量变化并计算总价，推荐用 computed 自动响应更新；若需 watch，应设 deep: true 深度监听 cart 数组，或提取 quantity 单独监听以优化性能。
Vue 3 中用 watch 监听购物车数量变化并触发价格计算，核心是监听响应式数据（如购物车列表）的变动，然后执行重新汇总逻辑。关键在于：要监听到“数量字段”的变化，而不是整个数组的引用变化，所以通常需配合 deep: true 或更精准地监听嵌套属性。
监听 cart 数组中每个 item 的 quantity 变化（推荐）
如果 cart 是一个响应式数组（例如 ref([]) 或 reactive([])），直接监听整个数组默认不会捕获内部对象属性的变化。需启用深度监听，并在回调中手动遍历计算：
import { ref, watch } from 'vue'
<p>const cart = ref([
{ id: 1, name: '苹果', price: 5.5, quantity: 2 },
{ id: 2, name: '香蕉', price: 3.2, quantity: 1 }
])</p><p>const totalPrice = ref(0)</p><p>// 深度监听 cart，当任意 item.quantity 改变时触发
watch(cart, () => {
totalPrice.value = cart.value.reduce((sum, item) => {
return sum + item.price * item.quantity
}, 0)
}, { deep: true })监听单个商品数量（适合局部更新场景）
若你通过方法修改某个 item 的 quantity（比如点击加减按钮），可单独为该字段设置响应式引用，或使用 computed 配合 watch 更细粒度控制：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
- 把 quantity 提成独立的
ref或用toRef提取响应性 - 对 quantity 做 watch，只在它变时重算对应 item 的小计，再汇总
- 适合性能敏感、购物车很大时避免全量遍历
用 computed 自动更新总价（更 Vue 风格，通常更优）
其实多数情况下，不需要手动 watch —— 直接用 computed 更简洁、响应及时、且自动缓存：
import { ref, computed } from 'vue'
<p>const cart = ref([...])</p><p>const totalPrice = computed(() => {
return cart.value.reduce((sum, item) => sum + item.price * item.quantity, 0)
})模板中直接绑定 {{ totalPrice }}，任何 cart 内部 quantity 或 price 变化都会自动更新，无需额外 watch。
注意事项
- 确保 cart 中每个 item 都是响应式的（用
reactive或ref包裹对象，避免直接改普通对象属性） - 如果用
push/splice等原生数组方法修改 cart，deep: truewatch 能捕获；但若替换整个数组（如cart.value = newArray），也会触发 - 避免在 watch 回调里直接修改被监听的数据，防止循环触发
