代码:
ts文件:
import { customRef } from "vue";
export function useFangdou<T>(value: T, delay = 200) {
let timeout: number;
return customRef((track, trigger) => {
return {
get() {
track();
return value;
},
set(newValue: T) {
clearTimeout(timeout);
timeout = window.setTimeout(() => {
value = newValue;
trigger();
}, delay);
},
};
});
}
使用:
<template>
<div class="page">
{{ text }}
<input v-model="text" />
</div>
</template>
<script setup lang="ts">
import { useFangdou } from "./fangdou";
const text = useFangdou("");
</script>
介绍:
使用Vue3中的customRef()实现自定义ref,多次get但是只在规定时间后进行一次set,实现防抖效果。
customRef() 预期接收一个工厂函数作为参数,这个工厂函数接受 track 和 trigger 两个函数作为参数,并返回一个带有 get和 set 方法的对象。