watchEffect 清理副作用防止定时器重复开启教程

watchEffect 的 onInvalidate 机制是解决定时器重复开启、请求冗余和内存泄漏等问题的关键利器——它在每次副作用重新执行前自动清理上一次未完成的任务，而非仅在组件卸载时才响应，尤其适用于搜索防抖、轮询和异步加载等高频响应场景；通过将定时器声明在 watchEffect 回调内部并配合 onInvalidate 清除，既能避免全局变量污染，又能确保每次变化都精准中断旧逻辑、启动新逻辑，简洁安全又符合 Vue 响应式设计哲学。

watchEffect 的核心优势之一，就是能自动追踪依赖并提供 onInvalidate 机制，在副作用重新执行前主动清理上一次未完成的操作——比如重复开启的定时器、未响应的请求、未移除的事件监听等。这在搜索框防抖、异步加载、轮询等场景中非常关键。

为什么需要清理定时器？

不清理会导致多个定时器同时运行，出现“多次触发”“结果错乱”“内存泄漏”等问题。例如用户快速输入“abc”，若每次输入都启动一个 1 秒定时器去请求，最终可能触发三次请求，但只有最后一次结果有意义，前两次应被取消。

onInvalidate 是怎么工作的？

它不是在组件卸载时才调用，而是在下一次 watchEffect 执行前立即触发，确保旧任务被中断。注意：
– 第一次执行 watchEffect 时，不会调用 onInvalidate；
– 后续每次因依赖变化而重新执行前，先运行 onInvalidate 里的清理逻辑；
– 组件销毁或手动 stop 时，也会触发一次 onInvalidate。

防抖搜索 + 定时器清理实战写法

以输入关键词触发延迟请求为例：

• 用 ref 管理搜索关键词：const keyword = ref('')
• 在 watchEffect 回调中启动定时器，并把 timer 句柄保存下来
• 通过 onInvalidate 清除上一个 timer，避免堆积

代码示例：

const keyword = ref('')
let timer = null

watchEffect((onInvalidate) => {
  // 每次 keyword 变化，先清除上一轮定时器
  onInvalidate(() => {
    if (timer) clearTimeout(timer)
  })

  // 启动新定时器（模拟防抖 500ms）
  timer = setTimeout(() => {
    console.log('发起请求:', keyword.value)
    // 这里可调用 api.search(keyword.value)
  }, 500)
})

更安全的写法：避免全局变量污染

上面用了 let timer，其实推荐把 timer 写在回调内部，靠闭包保持引用，更符合响应式逻辑：

• 每次 watchEffect 执行都是独立作用域，timer 是局部变量
• onInvalidate 能访问到当前闭包内的 timer，无需担心跨次干扰
• 组件销毁时，timer 自然被 GC，配合 onInvalidate 更稳妥

优化后写法：

watchEffect((onInValidate) => {
  const timer = setTimeout(() => {
    console.log('请求关键词:', keyword.value)
  }, 500)

  onInValidate(() => {
    clearTimeout(timer)
  })
})

不复杂但容易忽略

好了，本文到此结束，带大家了解了《watchEffect 清理副作用防止定时器重复开启教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！