vue3:customRef 自定义ref

类型

function customRef<T>(factory: CustomRefFactory<T>): Ref<T>type CustomRefFactory<T> = (track: () => void,trigger: () => void
) => {get: () => Tset: (value: T) => void
}

场景：输入框输入数值，要过一会才回显到页面上，如果使用v-model则实时变化，所以可以使用官方提供的customRef

创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：

import { customRef } from 'vue'export function useDebouncedRef(value, delay = 200) {let timeoutreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, delay)}}})
}

使用 

<script setup>
import { useDebouncedRef } from './debouncedRef'
const text = useDebouncedRef('hello')
</script><template><input v-model="text" />
</template>