Vue 响应式侦听如何结合 watchEffect 实现多个响应式变量的联动计算

watchEffect适合变量变更即触发联动计算，自动追踪依赖无需手动声明，支持多ref响应、竞态清理及computed预处理，但不提供新旧值对比。

watchEffect 适合做“只要变量一变，就重新执行逻辑”的联动计算，它自动追踪内部读取的响应式值，不用手动列依赖，写起来更轻量、语义更直接。

用 watchEffect 自动收集多个 ref 的变化

当你有多个独立的响应式变量（比如搜索关键词、分类、状态），又希望它们任意一个变动都触发一次计算或请求，watchEffect 是最自然的选择。它会在回调里自动识别你读取了哪些 ref，并在任一值更新时重新运行整个函数。

1. 直接在回调中读取 ref 的 .value，Vue 就会把它加入依赖追踪列表
2. 不需要传数组，也不用担心漏掉某个变量
3. 适合做搜索过滤、图表重绘、表单校验汇总等“结果驱动型”联动

配合 onInvalidate 处理竞态与清理

联动计算常伴随异步操作（如 fetch、setTimeout），新触发可能覆盖旧结果。watchEffect 提供 onInvalidate 回调，让你能主动中断前序未完成任务。

1. 每次新执行前，onInvalidate 会先被调用，可在这里 clearTimeout 或 abort fetch
2. 避免旧请求返回后错误地覆盖新状态
3. 例如：用户快速输入时，只保留最后一次搜索的结果

结合 computed 预处理参数再联动

如果联动逻辑依赖组合条件（比如“只有关键词非空且分类有效才发起请求”），建议先把判断逻辑抽到 computed 中，再在 watchEffect 里读取它。

1. computed 负责业务规则表达，watchEffect 负责副作用执行，职责分离更清晰
2. 比如 const shouldSearch = computed(() => keyword.value && isValidCategory(category.value))
3. watchEffect 里 if (!shouldSearch.value) return，跳过无效触发

注意 watchEffect 不提供新旧值对比

它只关心“现在该算什么”，不暴露 oldValue。如果你需要基于差异做不同处理（比如仅当页码变化才滚动到顶部），就得改用 watch 数组方式；但多数联动计算只需最新状态，watchEffect 更简洁可靠。