纯函数不能直接提升watchEffect依赖追踪效率，而是通过确保副作用逻辑稳定、无副作用、路径确定，使依赖收集更精准；推荐用computed封装条件逻辑并让watchEffect只依赖其结果，避免非确定性访问和隐式读取，拆分单一职责的watchEffect，并用onInvalidate管理异步生命周期。
纯函数本身不能直接“提升 watchEffect 的依赖追踪效率”，因为 Vue 的依赖收集机制不依赖于函数是否纯，而取决于副作用函数中实际访问的响应式数据路径是否稳定、可预测、无副作用。所谓“用纯函数优化”，本质是通过编写符合纯函数特征的副作用逻辑，来减少意外依赖、避免冗余触发、增强可维护性，从而让 watchEffect 的自动追踪更精准、更可控。
依赖只在确定路径中被读取
纯函数强调无副作用、相同输入必得相同输出。当 watchEffect 的回调写成纯函数风格时，它对响应式数据的访问就天然具备条件收敛性——不会因外部状态或随机分支导致不可控的依赖引入。
- ✅ 推荐：用 computed 封装动态判断逻辑，再让 watchEffect 读取这个计算结果
- ❌ 避免：在回调里写 if (Math.random() > 0.5) { useA.value } else { useB.value } ——这种非确定性访问会让依赖时有时无，Vue 无法稳定管理
- 示例：把搜索条件组合逻辑抽到 computed 中
watchEffect(() => {
if (shouldFetch.value) fetchList()
})
这样，watchEffect 只依赖 shouldFetch.value 这一个明确信号，而不是分散追踪 query、page、loading 三个 ref 的全部变化。
避免隐式读取和副作用干扰
纯函数不修改外部状态，也不依赖未声明的输入。这能防止你在 watchEffect 回调里“顺手读一下”某个 ref，结果无意中把它加进依赖列表。
- 删除无意义的响应式访问，比如单独一行写
someRef.value; - 不把异步操作（如 await）和响应式读取混在同一作用域，尤其避免 await 后才读取关键依赖
- 所有响应式数据的读取，都应服务于当前副作用的明确目的，不“顺便”触发其他逻辑
拆分关注点，每个 watchEffect 做一件事
纯函数鼓励单一职责。一个只负责更新 DOM 样式，一个只负责发请求，一个只负责同步 localStorage —— 每个函数的输入（即依赖）边界清晰，不会互相污染。
- 例如：UI 状态更新不掺杂 API 调用逻辑，就不会把 token、headers、abortController 等非 UI 相关响应式对象拖进依赖树
- 每个 watchEffect 的依赖集小且稳定，变更时重运行开销低，也更容易调试
用 onInvalidate 管理异步生命周期
纯函数虽不处理副作用，但 watchEffect 提供了 onInvalidate 机制来安全包裹异步行为。这是实现“逻辑纯 + 副作用可控”的关键桥梁。
- 每次新请求发起前，自动取消上一次未完成的请求
- 定时器、事件监听等资源，在下次执行前被明确清理
- 这样即使依赖频繁变化，也不会堆积未完成的异步任务，避免竞态和内存泄漏
const controller = new AbortController()
onInvalidate(() => controller.abort())
fetch('/api', { signal: controller.signal })
})
