Vue3 极简实现购物车（全选、编辑、小计、批量操作）

一、前言
购物车是前端项目里非常经典的业务场景，包含新增商品、单行编辑、数量增减、单选 / 全选、自动计算选中总价、单行删除等核心功能。
今天我们用 Vue3 组合式 API + ref + reactive，不引入任何 UI 组件库，纯原生手写一版完整购物车，代码简洁易懂，非常适合练手。
二、最终实现功能清单
顶部输入框新增商品，非空校验，添加后自动清空输入框
商品行展示：名称、单价、数量、自动计算小计
数量加减，数量最小值限制为 1，不能减到 0
单行编辑：点击编辑按钮切换文字 / 输入框，直接修改名称和价格
单行删除：一键删除当前商品
单选 + 顶部全选联动
自动统计：商品总件数、选中商品总价（保留两位小数）
数据全部为响应式，修改后页面自动刷新。

四、核心知识点拆解1. 响应式数据区分：ref 与 reactive
ref：用来定义字符串、数字、布尔等基础类型变量。
在 setup 内部修改值必须写 .value，模板里使用时不需要加。
reactive：专门用来定义对象、数组这类引用类型，直接修改对象属性就能触发页面更新，不需要 .value。
购物车商品列表是数组，所以我们用 reactive 来定义 cartList。
2. 双向绑定 v-model
新增商品输入框：v-model="goodsName" 实现输入内容和变量双向同步。
单行复选框：v-model="item.checked" 绑定每条商品的选中状态。
编辑模式输入框：直接 v-model="item.name"，修改内容会同步到数组原始数据。
3. 编辑切换：v-if + v-else + 状态控制给每一条商品增加布尔字段 isEdit：
isEdit = false：展示纯文字
isEdit = true：展示输入框
点击编辑按钮直接取反布尔值：item.isEdit = !item.isEdit，轻松实现视图切换。
4. 数量控制
加号：直接 item.num++
减号：增加判断，保证数量不会小于 1，防止出现 0 或者负数。
5. 自动小计计算单行小计直接在模板运算：js运行(item.price * item.num).toFixed(2)
toFixed(2) 用来保留两位小数，符合金额展示规范。6. 数组方法实现总价统计（不用写计算属性）
总件数：reduce 累加所有商品数量
js运行cartList.reduce((sum,item)=>sum+item.num,0)

选中商品总价：先filter筛选出勾选的商品，再reduce累加金额
js运行cartList.filter(i=>i.checked).reduce((s,i)=>s+i.price*i.num,0).toFixed(2)
7. 全选联动监听全选框的 change 事件，遍历整个购物车数组，把每一条 checked 同步成全选框的值，一键控制所有商品选中状态。8. 单行删除利用数组splice(下标,1)直接删除对应下标数据，Vue 会自动更新列表。五、拓展优化方向（可以自己继续升级）
增加 “批量删除选中商品” 功能，过滤掉checked=true的数据
增加反选联动：手动把所有商品取消勾选时，自动取消顶部全选
给价格增加非负数校验，禁止输入负数
把总价提取为计算属性computed，让模板更简洁
增加回车快速添加商品的键盘事件
对新增商品做去重判断，同名商品自动合并数量
六、总结这个购物车案例覆盖了 Vue3 最常用的基础语法：双向绑定、条件渲染、列表循环、响应式数据、事件绑定、数组遍历运算。