使用Vue customRef创建防抖 ref

customRef 用于创建一个自定义的ref，显式声明对其依赖追踪和更新触发的控制方式。

function customRef<T>(factory: CustomRefFactory<T>) : Ref<T>

// customRef接受一个工厂函数作为参数，这个工厂函数接受track、trugger两个函数
// 作为参数，并返回一个带有get和set方法的对象

type  CustomRefFactory<T> = (
    track:()=>void,
    trigger:()=>void
) => {
    get:()=>T
    set:(value:T) => void
}

// 一般来说，track()应该在get()方法中调用，而trigger()应该在set()中调用

示例

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

import { customRef } from 'vue'

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

    })
}

在组件中使用：

<script setup>
import { useDebouncedRef } from './debounceRef'
const text = useuseDebouncedRef('hello')

</script>

<template>
    <input v-model="text" />
</template>