Vue每日一题 -响应式购物车组件

🎯 题目描述
实现一个简单的购物车组件，要求具备以下功能：
1.
展示商品列表（商品名称、价格、库存）
2.
可以添加商品到购物车
3.
可以在购物车中修改商品数量
4.
可以从购物车中删除商品
5.
实时计算购物车总价
6.
当库存不足时，禁用添加按钮
💡 要求
使用Vue 3 Composition API
使用响应式数据
组件化开发思维
合理的用户交互提示
🔧 参考解答

🎓 学习要点
1.
响应式数据：使用 ref() 创建响应式数据
2.
计算属性：使用 computed() 创建依赖于其他响应式数据的计算属性
3.
条件渲染：使用 v-if 和 v-else 进行条件渲染
4.
列表渲染：使用 v-for 渲染列表数据
5.
事件处理：使用 @click 处理点击事件
6.
动态属性：使用 :disabled 动态控制按钮状态
7.
数组操作：使用 find(), splice(), reduce() 等方法操作数组
🚀 扩展练习
1.
添加商品搜索功能
2.
实现购物车数据持久化（localStorage）
3.
添加商品分类筛选
4.
实现优惠券功能
5.
添加商品详情弹窗