电商价格监控系统：WatchEffect实战案例

快速体验

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

   开发一个电商价格监控面板，使用WatchEffect实现：1) 实时监控商品价格变化并高亮显示 2) 当价格低于设定阈值时触发邮件通知 3) 自动计算价格变化趋势图表 4) 防抖处理避免频繁触发。要求使用Vue3+TypeScript，包含响应式数据结构和Mock API。

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

最近在做一个电商项目，需要实时监控竞品价格波动。用Vue3的WatchEffect实现了核心功能，记录下开发过程和踩坑经验。

1. 需求分析

电商价格监控主要解决三个问题：实时感知价格变化、自动触发预警、分析价格趋势。我们系统需要做到：

• 每5分钟抓取一次竞品价格
• 价格波动超过5%时标红显示
• 低于成本价自动发邮件告警
• 生成7天价格折线图

2. 技术方案

选择Vue3+TypeScript组合，关键点在于：

1. 响应式数据设计 用reactive定义商品对象数组，每个商品包含当前价、历史价、阈值等字段。TypeScript接口确保数据结构规范。

2. WatchEffect核心逻辑 监控整个商品数组变化，当检测到price字段变动时：

3. 调用高亮函数
4. 检查是否触发阈值

5. 更新历史数据

6. 性能优化

7. 防抖处理：价格接口可能频繁返回微调，设置500ms延迟再响应
8. 批量更新：合并同时段的多商品变更
9. 条件执行：只有特定字段变化才触发计算

3. 关键实现

1. Mock API搭建 用json-server快速创建模拟接口，返回带时间戳的价格数据。调试阶段可以手动修改json文件模拟价格波动。

2. 趋势图表集成 接入ECharts，在WatchEffect中当历史数据更新时重新渲染图表。注意用nextTick确保DOM更新完毕。

3. 邮件通知 对接第三方邮件服务，阈值判断逻辑放在Watcher回调里。注意错误处理避免重复发送。

4. 踩坑记录

• 深监听问题：发现数组内对象属性变化未触发，需要用deep选项
• 异步顺序：价格计算依赖接口返回，要用watchEffect的onCleanup处理竞态
• 内存泄漏：长时间运行的Watcher需要组件卸载时手动停止

5. 效果验证

上线后准确捕捉到3次竞争对手的突然降价，自动调价功能每天节省人工比对2小时。图表展示功能帮助发现了某商品的周期性促销规律。

这次开发体验了InsCode(快马)平台的一键部署能力，写完代码直接生成可访问的演示地址，省去了配置Nginx和域名的麻烦。

实际测试发现WatchEffect比传统watch更适合这种多依赖项的监控场景，代码量减少了40%。TypeScript的类型提示也避免了很多低级错误。

快速体验

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

   开发一个电商价格监控面板，使用WatchEffect实现：1) 实时监控商品价格变化并高亮显示 2) 当价格低于设定阈值时触发邮件通知 3) 自动计算价格变化趋势图表 4) 防抖处理避免频繁触发。要求使用Vue3+TypeScript，包含响应式数据结构和Mock API。

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