watcheffect 是 vue3 中自动追踪响应式依赖并实时执行副作用的工具，适用于 echarts 动态图表更新、canvas 粒子动画重置、gsap/framer motion 属性驱动及响应式控制面板联动，兼顾性能与实时性。
watchEffect 是 Vue3 中响应式数据与视觉更新之间最直接的桥梁。它不依赖手动指定依赖，而是自动追踪内部读取的响应式变量，只要这些变量变化，就立刻重新执行副作用函数——这正契合动画库对“数据一变、画面即动”的实时性要求。
绑定 ECharts 动态图表
当数据源是 ref 或 reactive 对象时，watchEffect 可在初始化后自动监听其变化，并调用 chartInstance.setOption 更新视图：
- 只传入需更新的字段（如 series.data、xAxis.data），配合 replaceMerge: ['series', 'xAxis'] 避免全量重绘
- 加入 lazyUpdate: true 让 ECharts 延迟合并，提升高频更新下的渲染效率
- 在 watchEffect 内加空值判断（if (!chartInstance) return），防止图表未挂载时报错
驱动 Canvas 粒子动画
把粒子系统的参数（数量、速度、颜色范围）设为响应式变量，watchEffect 就能实时重置整个粒子池：
- 粒子系统通常有 init()、update()、render() 三阶段；watchEffect 触发时调用 init() 重建粒子数组
- 若仅调节颜色或透明度等渲染参数，可跳过重建，直接更新 canvas context 的 fillStyle 或 globalAlpha
- 搭配 requestAnimationFrame，在 update() 中用 Date.now() 控制时间步长，避免 watchEffect 自身触发帧率失控
联动 GSAP 或 Framer Motion
这类动画库擅长属性插值，而 watchEffect 负责“告诉它该动什么”：
- 将目标 DOM 元素的 transform、opacity 等属性映射为 ref，watchEffect 检测到变化后，用 gsap.to() 启动新动画
- 使用 gsap.killTweensOf(el) 清除旧动画，防止多个动画叠加冲突
- 对需要缓动控制的数值（如进度条百分比），watchEffect 可触发 gsap.fromTo() 实现平滑过渡而非瞬时跳变
响应式控制面板 + 实时预览
用户拖动 range 滑块调整动画参数时，watchEffect 是最轻量的响应层：
- 每个滑块绑定一个 ref（如 speed = ref(1)、particleCount = ref(150)），watchEffect 监听它们的组合变化
- 内部做防抖（用 setTimeout + clearTimeout 封装），避免鼠标连续拖动触发过多重绘
- 更新 canvas 或重设动画实例时，优先复用已有对象（如重置粒子位置而非 new Array），减少内存分配
