用 reactive 管理购物车需将 cartitems 设为响应式数组，每项商品为独立 reactive 对象，含 id、skuid、name、price、quantity 等字段；添加商品须用 reactive 包裹，已存在则直接修改 quantity；总价、总件数等派生状态必须用 computed 计算。
用 reactive 管理购物车商品列表，关键在于把整个购物车结构声明为响应式对象，并确保所有嵌套字段（如商品属性、数量、规格等）都处于响应式追踪范围内。它不是只“包一层”数组就完事，而是要让内部每个可变字段都能触发视图更新。
购物车数据结构要扁平且可响应
避免用普通对象字面量直接塞进 reactive，尤其是带深层嵌套或动态 key 的结构。推荐结构示例如下：
- cartItems：用数组存储每项商品，每项是独立的 reactive 对象
- 每项包含
id、skuId、name、price、quantity、attrsText等基础字段 - 不建议把整个商品详情对象（如
product: { id, name, price, specs: [...] }）原样嵌套，否则修改product.price不会触发购物车总价重算（除非显式标记为 reactive）
添加商品时保持响应式引用
不能简单 push 普通对象，必须确保新条目本身也是响应式的：
- 用
reactive({ ...goods, quantity: 1 })包裹新商品项再 push - 若商品已存在，直接修改其
quantity字段（如item.quantity++），Vue 会自动追踪 - 避免
cartItems.value.push(Object.assign({}, goods))这类非响应式拷贝
数量和价格计算要依赖 computed
总价、总件数这类派生状态，必须用 computed 封装，不能手动维护：
totalItems = computed(() => cartItems.value.reduce((sum, i) => sum + i.quantity, 0))totalPrice = computed(() => cartItems.value.reduce((sum, i) => sum + i.price * i.quantity, 0).toFixed(2))- 只要
cartItems或其中任意i.quantity/i.price变化，computed 就自动重新求值
处理规格 SKU 等动态字段要小心
当商品带多规格（如颜色、尺码），skuId 和 attrsText 是区分不同购物车条目的关键：
- 查找是否已存在某 SKU：
cartItems.value.find(i => i.skuId === newSkuId) - 存在则
item.quantity++；不存在则cartItems.value.push(reactive({...})) - 不要把
attrsText存成普通字符串后又尝试响应式修改——它本身不需要 reactive，但所在对象必须是 reactive 的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
