使用Vue customRef创建防抖 ref

2023-12-20 22:43:59

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>

文章来源:https://blog.csdn.net/content6/article/details/135115521
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。