watchEffect 实现埋点的核心是将行为触发转化为状态变更响应：通过监听 currentPage、isLogin、searchKeyword 等响应式变量变化，自动采集上报；结合 onInvalidate 清理竞态请求与副作用，配合 flush: 'post'、条件过滤和轻量聚合提升准确性与性能。
用 watchEffect 实现基于用户行为的埋点统计，关键不是“监听点击”，而是让埋点触发逻辑自动响应用户状态变化：比如当用户完成登录、进入特定页面、停留超时、或触发某类交互时，响应式变量一更新，watchEffect 就立刻执行采集和上报。它把“行为是否发生”转化为“状态是否变更”，避免手动绑定大量事件监听器，也天然支持防抖、竞态清理和条件控制。
埋点所需的核心响应式状态设计
先明确哪些用户行为需要被统计，再将其抽象为可追踪的响应式信号：
-
页面级行为：用
currentPage = ref('/product/detail')+pageViewTime = ref(Date.now())表示当前页及首次进入时间 -
交互状态：如
isLogin = ref(false)、activeTab = ref('comments')、searchKeyword = ref('') -
时效性指标：用
stayDuration = ref(0)配合定时器更新，watchEffect 可感知停留增长并触发“长停留”埋点 - 所有状态都应由业务逻辑（如路由守卫、表单提交回调、IntersectionObserver）驱动赋值，而非直接在事件里调用
trackEvent()
用 watchEffect 自动触发埋点采集与上报
每个埋点场景对应一个独立的 watchEffect，只关注“什么变了 → 该报什么”：
- 页面浏览埋点：
监听currentPage变化，自动采集 URL、referral、设备信息等上下文，调用sendTrack({ event: 'page_view', ... }) - 关键操作埋点：
监听isLogin从false → true，上报登录成功事件，并附带登录方式、耗时等衍生字段 - 搜索行为埋点：
监听searchKeyword，配合onInvalidate清理上一次未完成的防抖请求，避免重复上报空搜或中间词 - 异常行为预警：
监听errorCount（由全局错误拦截器维护），当连续报错 ≥3 次，触发logEvent('js_error_burst')
结合 onInvalidate 处理竞态与副作用清理
真实场景中，用户行为常有快速连续、中途取消、条件失效等特点，onInvalidate 是保障埋点准确性的核心机制：
- 用户快速输入搜索词，每次变化都可能发起请求 → 在
onInvalidate中 abort 上一个fetch请求 - 用户切换标签页导致页面不可见 →
visibilityState变为hidden，在onInvalidate中暂停计时器、清空待上报队列 - 表单填写中途离开页面 → 利用
onInvalidate触发“未完成提交”埋点，记录已填字段数、停留时长等诊断数据
上报策略与轻量聚合控制
不建议每次变化都发请求，可通过简单聚合提升性能与稳定性：
- 使用
flush: 'post'确保 DOM 更新完成后才执行埋点，避免取不到最新节点信息 - 对高频行为（如滚动、鼠标移动）不直接埋点，而是用
watchEffect收集频次/区间，达到阈值再批量上报 - 添加基础过滤：例如
if (isLogin.value && currentPage.value.includes('pay'))才触发支付页曝光埋点 - 失败重试可封装在
sendTrack内部，watchEffect 只负责“告诉它该发了”，不参与网络细节
