Vue3 Watch在电商购物车中的实际应用

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

生成一个电商购物车的Vue3组件代码，使用Watch监听购物车商品列表的变化，自动计算总价并更新显示。要求包含添加商品、删除商品和修改数量的功能，并展示Watch如何响应这些变化。

1. 点击'项目生成'按钮，等待项目生成完整后预览效果

在电商项目中，购物车功能的核心在于实时响应数据变化。最近用Vue3的watch特性重构了一个购物车模块，发现相比Vue2的watch有了更灵活的用法。这里分享下具体实现思路和踩坑经验。

1. 基础数据结构设计购物车组件需要维护两个核心数据：商品列表和总价。商品列表中的每个商品对象包含id、名称、单价、数量等字段。总价则由商品列表动态计算得出，这种派生关系正是watch的用武之地。

2. watch的基本监听在Vue3中，可以用watch函数直接监听整个商品列表。当用户增删商品或修改数量时，watch会自动触发回调函数。这里有个细节：默认情况下watch是浅监听，如果只修改商品对象的某个属性（比如数量），需要设置deep:true才能触发回调。

3. 计算总价的优化最初我直接在watch回调里遍历商品列表计算总价，后来发现用computed属性更合适。因为computed会自动缓存计算结果，只有依赖的商品列表变化时才会重新计算。最终方案是watch负责处理业务逻辑（比如校验数量不能为负），computed负责派生数据。

4. 添加商品功能添加商品时需要判断是否已存在相同id的商品。这里用watchEffect监听商品列表变化，在添加时自动合并相同商品的数量。watchEffect的即时执行特性很适合这种初始校验场景。

5. 删除商品实现删除操作相对简单，直接过滤掉指定id的商品即可。但要注意在watch回调中处理边缘情况，比如删除最后一件商品时要重置总价为0，避免显示异常。

6. 修改数量的细节数量输入框绑定v-model后，通过watch监听每个商品的数量变化。这里需要防抖处理，避免用户快速输入时频繁触发计算。Vue3的watch支持直接传入ref对象，比Vue2的字符串形式更直观。

7. 性能优化点当购物车商品较多时，deep watch可能成为性能瓶颈。解决方案是改为监听特定属性，或用watchEffect配合自定义逻辑来精确控制监听范围。另外将频繁变化的数据用shallowRef包裹也能提升性能。

8. 与Vuex/Pinia的配合在状态管理库中使用watch时，要注意作用域问题。推荐在组件内watch store的状态变化，而不是直接修改store中的侦听器，这样更符合单向数据流原则。

整个开发过程中，InsCode(快马)平台的实时预览功能帮了大忙。代码保存后立即能看到购物车效果，不用手动刷新页面。特别是调试watch触发逻辑时，能直观看到数据流动，效率提升明显。

最惊喜的是这个购物车项目可以直接一键部署，不用自己配置nginx或者node环境。测试分享给同事时，他们通过生成的链接就能看到完整交互效果，连后端同学都能快速验证接口数据格式，协作效率提高不少。

快速体验

1. 打开 InsCode(快马)平台 https://www.inscode.net
2. 输入框内输入如下内容：

生成一个电商购物车的Vue3组件代码，使用Watch监听购物车商品列表的变化，自动计算总价并更新显示。要求包含添加商品、删除商品和修改数量的功能，并展示Watch如何响应这些变化。

1. 点击'项目生成'按钮，等待项目生成完整后预览效果