Vue watchEffect 的 onCleanup 参数详解：如何正确注册清理函数以解决异步竞态问题
首先需要明确一个关键概念：onCleanup 并非由开发者手动定义或编写的函数。实际上，它是 Vue 框架在调用 `watchEffect` 副作用回调时，自动传递给开发者的一个内置工具函数。你的核心操作是：在 `watchEffect` 的回调函数中调用 `onCleanup`，并将需要执行的清理逻辑封装为一个函数传入。其设计目的非常清晰：在副作用函数即将重新运行，或者组件被卸载销毁前，自动触发清理逻辑，以取消那些已过期的异步操作。这正是处理前端常见竞态条件（Race Condition）的核心机制。
onCleanup 的基本语法与使用规范
其用法非常直观，仅接收一个函数作为参数。该函数即为你的清理逻辑，它会在下次 `watchEffect` 执行之前，或组件销毁时被自动调用。
- 在 watchEffect 的回调函数内部，`onCleanup` 作为第一个参数提供（回调函数签名通常为 `(onCleanup) => { ... }`）。
- 请注意，你不能自行声明一个名为 `onCleanup` 的变量或函数，其调用时机由 Vue 响应式系统严格管理，开发者只需注册清理逻辑。
- 清理函数内通常执行哪些操作？主要包括：中止进行中的 Fetch 请求（Abort）、清除定时器（`clearTimeout`/`clearInterval`）、移除事件监听器、取消 Promise 链或订阅等。核心目标是释放不再需要的资源与操作。
解决异步请求竞态问题（核心应用场景）
考虑一个典型搜索建议场景：用户快速输入关键词，每次输入变化都会触发一个搜索 API 请求。若不加以控制，多个请求将并行发生，但只有最后一次请求的结果才是用户最终期望看到的。如何自动取消之前的过期请求？这需要结合 `onCleanup` 与浏览器原生的 `AbortController` 接口。
- 每次 `watchEffect` 副作用函数执行时，首先创建一个新的 `AbortController` 实例。
- 将该实例的 `signal` 属性作为配置项，传递给 `fetch` 或 `axios` 等 HTTP 客户端。
- 紧接着，立即调用 `onCleanup`，并传入一个执行 `controller.abort()` 的清理函数。
- 当请求返回后，在更新组件状态前，应先检查该请求是否已被中止（可通过 `signal.aborted` 属性判断），仅处理未被取消的请求响应数据。
这套流程确保了只有最新的请求有效，先前发起的请求会被自动终止，从而彻底解决请求竞态导致的数据错乱问题。
清理定时器与事件监听器
除了网络请求，`onCleanup` 也广泛应用于其他会产生持续副作用的场景，任何可能造成内存泄漏或残留的操作都应规划清理。
- 若使用 `setInterval` 创建了周期性任务，务必在 `onCleanup` 中调用对应的 `clearInterval` 来清除。
- 如果向全局对象（如 `window`、`document`）添加了事件监听（例如 `scroll`、`resize`），相应的 `removeEventListener` 调用应置于清理函数内。
- 对于第三方库实例（如数据可视化图表、地图组件等），其提供的 `destroy()` 或 `dispose()` 方法，也应在 `onCleanup` 中调用以确保资源释放。
养成“设置副作用后立即规划清理”的编码习惯，能显著提升应用性能与稳定性，避免内存泄漏。
理解执行时机与手动停止侦听器
一个重要细节是：`onCleanup` 注册的清理函数，默认会在下一次副作用执行前被触发，而不仅仅在组件卸载时。这意味着只要 `watchEffect` 的依赖项发生变化导致重新运行，上一次注册的清理逻辑就会先执行。
如需完全手动停止一个 `watchEffect` 侦听器，应使用其返回的 `stop` 函数：
- 通过 `const stopHandle = watchEffect(() => { ... })` 获取停止函数引用。
- 在适当的业务逻辑（如条件满足后）调用 `stopHandle()` 即可主动终止该副作用侦听。
- 当组件卸载时，Vue 会自动调用该 `stop` 函数，同时也会触发所有已注册的 `onCleanup` 清理逻辑，无需开发者额外处理。
熟练掌握并应用 `onCleanup`，能使你的 Vue 响应式副作用代码更加健壮、清晰，尤其是在处理异步数据流时，它是保障数据一致性与界面正确性的关键工具。
