代码:
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 方法的对象。