Vue3组合式API中watch内防抖函数无法触发问题

你的代码有两个核心问题，导致防抖逻辑完全没生效：

1. 只创建了防抖函数，但没执行它
   你在watch回调里调用handleDebounce(...)时，这个函数会返回一个包装后的防抖函数，但你没执行这个返回的函数，所以内部的return function()从来没运行过，自然不会触发防抖逻辑。

2. 每次watch触发都重新生成新的防抖实例
   就算你执行了返回的函数，每次watch回调都会重新调用handleDebounce，生成一个全新的防抖函数，里面的timeoutID都是新变量，之前的定时器根本不会被清除，等于每次都是独立的防抖，完全起不到作用。

修正后的代码示例 #

setup() {
  // 通用防抖工具函数
  const debounce = (fn, delay) => {
    let timeoutID = null
    return function (...args) {
      clearTimeout(timeoutID)
      timeoutID = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }

  // 提前创建好防抖后的处理函数实例
  const debouncedHandler = debounce((input) => {
    console.log(input)
  }, 3000)

  watch(
    () => watched.value,
    (input) => {
      // 调用提前创建好的防抖函数
      debouncedHandler(input)
    }
  )
}

关键改动说明 #

• 把防抖函数抽成通用工具，在setup里提前创建一次防抖后的处理函数实例，避免每次watch触发都新建防抖实例。
• 在watch回调里直接调用这个提前创建好的防抖函数，并传入watch到的参数。
• 改用let替代var，避免变量提升导致的作用域混乱问题。

内容的提问来源于stack exchange，提问作者jdost_26