watchEffect需显式用onInvalidate注册清理逻辑，仅在依赖更新将重执行或组件卸载且未被新执行替代时触发，用于中止未完成操作如请求、定时器、事件监听等。
watchEffect 本身不自动清理旧的副作用，必须显式使用 onInvalidate（或旧版叫 onCleanup）注册清理逻辑，才能在依赖变化导致重新执行前，安全地中止上一轮未完成的操作。
onInvalidate 是清理旧副作用的关键入口
它不是每次 effect 执行完都调用，而只在以下两种情况触发清理函数：
- 当前 watchEffect 因响应式依赖更新，即将被新一次执行覆盖时
- 组件卸载（unmounted）且该 effect 尚未被新执行替代时
也就是说，它专门负责“中断上一轮还没做完的事”，比如正在 pending 的请求、运行中的定时器、已绑定但未解绑的事件监听器。
典型场景：防抖搜索 + 取消上一个请求
用户快速输入关键词，每次变化都发起请求，但必须确保只处理最后一次响应：
- 每次进入 effect，先调用 onInvalidate 注册一个清理函数，比如 abort 上一个 AbortController
- 接着创建新的 AbortController，并发起带 signal 的 fetch 请求
- 若下一次 keyword 变化，上一轮的 onInvalidate 立即触发，abort 掉旧请求；新请求正常发出
代码示意：
<script setup>import { ref, watchEffect } from 'vue'
const keyword = ref('')
watchEffect((onInvalidate) => {
const controller = new AbortController()
onInvalidate(() => controller.abort()) // 依赖变时自动取消
fetch(`/api/search?q=${keyword.value}`, { signal: controller.signal })
.then(res => res.json())
.then(data => console.log(data))
})
</script>
其他常见副作用的清理写法
只要副作用有明确的“终止动作”，就可在 onInvalidate 里配对写出：
- 定时器：onInvalidate(() => clearTimeout(timer)) 或 clearInterval(timer)
- 事件监听：onInvalidate(() => el.removeEventListener('click', handler))
- 第三方库实例：onInvalidate(() => chart.dispose()) 或 map.remove()
- 手动订阅：onInvalidate(() => unsubscribe())
注意边界：组件卸载时的兜底保障
onInvalidate 在组件 unmount 时也会触发，但仅限该 watchEffect 尚未被新执行覆盖的情形。如果 effect 已因依赖变化重跑过多次，最后一次的清理函数会接管全部收尾工作。不过为保险起见，复杂场景建议配合 onBeforeUnmount 做双重清理，尤其当副作用脱离 watchEffect 生命周期管理时（如全局事件、 shared worker 通信等）。
