【vue3+TS】customRef在实战中的使用(防抖)
- 新建文件
- debounced.ts文件内容
- 页面中使用
- 效果
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>