在 Vue 3 中，用 reactive 管理购物车需定义包含 items、totalAmount 等字段的完整响应式对象，确保商品 id、spec、quantity 等嵌套属性可追踪；增删改查须遵循响应式语义，规格重复时合并数量，派生状态用 computed，副作用用 watch 处理。
在 Vue 3 中，用 reactive 管理商城购物车的复杂商品列表，核心是把整个购物车结构声明为一个响应式对象，并确保嵌套属性（如商品数量、选中状态、规格参数、库存校验等）都能被正确追踪和更新。
用 reactive 定义结构化购物车状态
不要只对数组做 reactive，而是定义一个包含商品列表、总计、选中数等字段的完整对象。这样逻辑集中、便于扩展：
- 商品项需包含 id、name、price、spec（规格）、stock、quantity、isSelected 等关键字段
- 支持多规格（如颜色+尺寸），spec 建议用对象或唯一 key 标识，方便去重和合并
- 购物车顶层保留 totalAmount、totalQuantity、checkedCount 等派生状态（可用 computed 补充）
示例初始化：
const cart = reactive({items: [
{ id: 'p1', name: 'iPhone 15', price: 5999, spec: { color: 'black', size: '256GB' }, stock: 12, quantity: 2, isSelected: true },
{ id: 'p2', name: 'AirPods Pro', price: 1899, spec: { version: '2nd gen' }, stock: 5, quantity: 1, isSelected: false }
],
lastModified: Date.now()
});
增删改查操作要保持响应式语义
直接修改 cart.items 数组元素属性（如 item.quantity++）是响应式的；但替换整个数组或深层嵌套对象时需注意：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 添加新商品：用
push()或展开语法cart.items = [...cart.items, newItem] - 更新数量：直接赋值
item.quantity = Math.min(item.quantity + 1, item.stock)即可触发更新 - 删除商品：用
cart.items = cart.items.filter(...)，避免使用splice后未触发更新的问题 - 切换选中状态：直接改
item.isSelected = !item.isSelected，无需额外处理
处理规格组合与重复商品合并
用户多次添加同一商品不同规格，应视为不同条目；相同规格重复添加，则应合并数量（上限为库存）：
- 定义唯一 key：例如
const specKey = `${item.id}-${JSON.stringify(item.spec)}` - 查找已有项：
const exist = cart.items.find(i => getSpecKey(i) === specKey) - 存在则更新 quantity：
if (exist) exist.quantity = Math.min(exist.quantity + 1, exist.stock) - 不存在则 push 新项（注意 reactive 包裹后的对象已具备响应性，无需再 wrap）
配合 computed 和 watch 做状态联动
总价、选中项等属于派生状态，适合用 computed；而像“库存变化时自动取消超量选中”这类副作用，用 watch 更清晰：
- const totalPrice = computed(() =>
cart.items
.filter(i => i.isSelected)
.reduce((sum, i) => sum + i.price * i.quantity, 0)
); - watch(() => cart.items, (newItems) => {
newItems.forEach(item => {
if (item.isSelected && item.quantity > item.stock) {
item.quantity = item.stock;
}
});
}, { deep: true });
不复杂但容易忽略的是：reactive 对象内部的新增属性默认不响应（比如后期给某 item 加个 isEditing 字段），此时要用 Vue.set 或改用 ref 包裹单个字段；更推荐一开始就定义好完整结构，或统一用 reactive 初始化每个 item。
