watchEffect清除回调方法

`watchEffect` 中的 `onCleanup` 是 Vue 3 处理异步竞态问题的关键利器——它必须在副作用函数内部同步调用，用于注册自动触发的清理逻辑（如中止请求、清除定时器），Vue 会在新副作用执行前或组件卸载时精准调用它，从而确保旧请求不干扰新状态更新；正确使用不仅能优雅解决搜索输入频繁触发导致的响应错乱问题，还能与 `ref`、`loading` 等状态协同提升用户体验，但极易因调用位置错误、异步注册或误返回而失效，掌握其“隐式入参、同步注册、自动执行”的本质，是写出健壮响应式逻辑的必备一课。

在 watchEffect 中使用 onCleanup，核心是：它必须在副作用函数**内部同步调用**，且只接收一个函数作为参数，用于注册清理逻辑。它不是返回值，也不需要手动调用，Vue 会在副作用被覆盖或组件卸载前自动触发该回调。

onCleanup 的正确写法

onCleanup 是 watchEffect 副作用函数的「隐式入参」（类似 onInvalidate 在旧版中的用法），但实际使用时需从 vue 显式导入：

✅ 正确示例：

import { watchEffect, onCleanup } from 'vue'

watchEffect((onCleanup) => {
  const controller = new AbortController()

  // 发起请求，传入 signal
  fetch('/api/data', { signal: controller.signal })
    .then(res => res.json())
    .then(data => {
      // 处理响应（仅当未被清理时）
      if (!controller.signal.aborted) {
        console.log('数据已更新:', data)
      }
    })

  // 注册清理函数：中止请求
  onCleanup(() => {
    controller.abort()
  })
})

为什么能解决接口竞态问题？

当 watcher 副作用因响应式依赖变化而**重新执行**时，Vue 会先调用上一次注册的 onCleanup 回调，再运行新的副作用函数。这样就能确保旧请求被取消，避免旧响应覆盖新状态。

• 用户快速输入搜索关键词 → 触发多次 watchEffect 执行
• 第 1 次请求还没返回，第 2 次已发起 → 第 1 次的 onCleanup 自动调用 abort()
• 第 2 次请求完成后，只更新对应关键词的结果，不会被第 1 次的慢响应干扰

常见错误写法（务必避免）

• 在 onCleanup 外部调用它：比如写成 onCleanup(() => {...}) 在 watchEffect 函数体外 → 报错或无效果
• 异步调用 onCleanup：比如放在 setTimeout 或 .then 里 → 不会被识别为清理函数
• 试图返回清理函数：如 return () => {...} → Vue 不识别，无法自动调用
• 重复注册多个 onCleanup：每次调用都覆盖前一个，只需注册一次即可（内部自动管理）

搭配 ref 或 loading 状态更实用

实际开发中常配合数据加载状态使用：

const result = ref(null)
const loading = ref(false)

watchEffect((onCleanup) => {
  if (!searchQuery.value) return

  loading.value = true
  const controller = new AbortController()

  onCleanup(() => {
    controller.abort()
    // 可选：重置 loading（取决于你是否希望竞态时保持 loading）
  })

  fetch(`/api/search?q=${searchQuery.value}`, { signal: controller.signal })
    .then(res => res.json())
    .then(data => {
      if (!controller.signal.aborted) {
        result.value = data
        loading.value = false
      }
    })
    .catch(err => {
      if (err.name !== 'AbortError') {
        console.error('请求失败:', err)
        loading.value = false
      }
    })
})

本篇关于《watchEffect清除回调方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！