VUE customRef的使用

customRef()

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

• customRef()预期接收一个工厂函数作为参数，这个工厂函数接收track和trigger两个函数作为参数，并返回一个带有get和set方法的对象
• 一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。

使用场景

• 全局loading

const isLoading = customRef((track, trigger)=>{
    let count = 0
    return {
        get(){
            track()
            return count>0
        },
        set(val){
            count += val?1:-1
            count = Math.max(count, 0)
            trigger()
        }
    }

})

• 创建一个防抖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 './debouncedRef'
    const text = useDebouncedRef('hello')
</script>
<template>
    <input v-model="text" />
</template>