【vue3+TS】customRef在实战中的使用（防抖）

customRef用于自定义一个ref，可以显式的控制依赖追踪和触发响应，接受一个工厂函数，两个参数分别用于追踪的track与用于触发响应的trigger，并返回一个带有get和set属性的对象，在实际开发中可以实现***防抖函数***。

防抖函数：
是指在一段时间内，如果同一个函数被多次触发，则只执行最后一次，如果这段时间内没有再次触发该函数则执行一次。

应用场景：
频繁触发的事件，如输入框输入时实时搜索，在用户输入时每次都发起请求会造成性能问题，可以用防抖函数实现一定的延迟，等待用户输入完成后再请求。
滚动事件，如上拉加载更多，在滚动过程中会频繁触发，可以通过防抖函数实现一定的延迟，在用户停止滚动后再进行加载。

新建文件

新建文件src/hooks/debounced.ts

debounced.ts文件内容

import { customRef } from "vue";

export function useDebounced<T>(value: T, delay=300,callback:any) {
    let timer:any=null;
    return customRef((track, trigger) => {
        return {
            get() {
                track();//告诉vue追踪value数据的变化
                return value;
            },
            set(newValue:T) {
                //使用clearTimeout和setTimeout来实现防抖动
                clearTimeout(timer);
                timer=setTimeout(()=>{
                    value = newValue;
                    callback(newValue);
                    trigger();//告诉vue重新解析模板
                },delay);
            },
        };
    });
}

页面中使用

<template>
  <div>
    <input type="text" v-model="keywords">
  </div>
</template>
<script setup lang="ts">
import { useDebounced } from '../hooks/debounced'

let keywords = useDebounced<string>("",500,(val:string)=>{
  //写业务逻辑，比如请求数据
  console.log("输入的值",val)
})
</script>

效果