利用自定义ref实现防抖（customRef）

一、 利用自定义ref实现防抖--防抖与前端框架结合实现方案

核心背景

在前端框架开发中，防抖是处理高频触发事件（如输入框输入、窗口resize）的常用优化手段。实现方式需根据项目中的防抖场景数量灵活选择。

防抖场景较少：直接使用工具方法

适用场景

项目中需要防抖的功能不多，无需封装复杂逻辑。

实现思路

1. 定义通用防抖函数，接收目标函数与延迟时间
2. 在框架事件监听中，直接调用防抖函数包裹业务逻辑

基于框架自定义防抖API

适用场景

项目多处需要防抖功能，需封装成可复用的框架工具，避免重复代码。

实现思路（以Vue为例）

利用Vue的customRef自定义响应式数据，在set方法中加入防抖逻辑，实现数据更新的防抖控制。

1. 封装防抖ref工具函数

// debounceRef.js
import { customRef } from 'vue';

export function debounceRef(value, delay = 300) {
  let timer = null;
  
  // customRef接收track（收集依赖）和trigger（触发更新）两个参数
  return customRef((track, trigger) => {
    return {
      // 获取值时收集依赖
      get() {
        track();
        return value;
      },
      // 设置值时加入防抖逻辑
      set(newValue) {
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
          value = newValue;
          // 延迟触发更新
          trigger();
        }, delay);
      }
    };
  });
}

2. Vue3组件中使用防抖ref

// Vue组件中
import { debounceRef } from './debounceRef.js';

export default {
  setup() {
    // 创建防抖的响应式数据，延迟500ms更新
    const inputValue = debounceRef('', 500);
    
    // 监听防抖后的值变化
    watch(inputValue, (newVal) => {
      console.log('防抖后的值变化:', newVal);
      // 执行相关业务逻辑，如搜索请求
      searchAPI(newVal);
    });
    
    return {
      inputValue
    };
  }
};

3. Vue3模板中直接绑定

<!-- 输入时自动触发防抖，无需额外处理事件 -->
<input v-model="inputValue" />
<p>防抖后的值：{{ inputValue }}</p>