Vue3 customRef 怎么实现防抖输入？

Question

仓乃文 · Accepted Answer

搜索框输入时直接触发请求会导致频繁调用接口，customRef 可以自定义 ref 的 get/set 行为，在 set 中加入防抖逻辑，延迟触发更新，实现输入防抖。

防抖 ref 实现：
```javascript
import { customRef } from "vue";
function useDebouncedRef(value, delay = 300) {
  let timeout;
  return customRef((track, trigger) => ({
    get() {
      track();  // 追踪依赖
      return value;
    },
    set(newValue) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        value = newValue;
        trigger();  // 防抖后触发更新
      }, delay);
    }
  }));
}
```

组件中使用：
```javascript
const keyword = useDebouncedRef("", 300);
watch(keyword, (val) => {
  fetchSearchResults(val);  // 只在停止输入 300ms 后触发
});
```

补充说明：
- track() 在 get 中调用，标记依赖关系；trigger() 在 set 中调用，触发更新
- 防抖期间模板显示旧值，输入框不会卡顿
- 也可以用 watch + debounce 函数实现，但 customRef 封装更内聚
- customRef 还可以实现节流、本地存储同步等自定义行为