利用自定义Ref实现防抖

全栈练习生2026-04-07 13:13

防抖（Debounce）是一种常见的前端优化技术，用于限制函数频繁触发。本文通过自定义 ref 可以将其封装为可复用的逻辑。

防抖原理

防抖的核心是延迟执行函数，若在延迟时间内再次触发，则重新计时。通常用于输入框搜索、窗口大小调整等场景。

自定义防抖 ref 实现

以下是一个基于 Vue 3 的自定义防抖 ref 实现示例：

javascript 复制代码

import { customRef } from 'vue'

/**
 * 创建一个防抖的响应式引用
 * 
 * @param {*} value - 初始值
 * @param {number} [delay] - 防抖延迟时间（毫秒）
 * @returns 防抖后的响应式引用
 */
function useDebouncedRef(value, delay) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        // 依赖收集
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          // 派发更新
          trigger()
        }, delay)
      }
    }
  })
}

使用示例

在 Vue 组件中使用自定义防抖 ref：

javascript 复制代码

import { useDebouncedRef } from './useDebouncedRef'

export default {
  setup() {
    const searchQuery = useDebouncedRef('', 300)

    return {
      searchQuery
    }
  }
}

实现效果

输入框内容变化时，searchQuery 不会立即更新，而是在用户停止输入 300 毫秒后才会触发更新。这能有效减少不必要的计算或请求。

注意事项

延迟时间需根据实际场景调整，过长会影响用户体验，过短则失去防抖意义。
确保在组件卸载时清除定时器，避免内存泄漏。
可结合 watch 监听防抖后的值变化，执行相应逻辑。

这种方法将防抖逻辑封装为可复用的 ref，使代码更清晰且易于维护。

参考文献

2.84 Chb:/ 06/03 w@F.Uy 利用自定义ref实现防抖 # JavaScript # 前端开发工程师 # 编程 # 程序员 # web前端 https://v.douyin.com/-Pg4Yee_t7w/ 复制此链接，打开Dou音搜索，直接观看视频！