简介

作用

• 相当于自定义属性的get和set属性
• 并结合vue的响应式

类型声明

export declare function customRef<T>(factory: CustomRefFactory<T>): Ref<T>;

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

1. 通过声明我们可以看出来factory为工厂函数
2. 工厂函数有两个参数，这两个参数都是函数
3. 工厂函数要返回一个对象，对象中有get和set

代码

<script setup>
import { customRef } from 'vue';

// 相当于自定义属性的get和set属性
/*
函数跟一个回调函数，回调函数有两个参数
    1. track：当我们获取数据的时候，告诉vue追踪数据
    2. trigger：当我们设置数据的时候，告诉vue来进行界面的更新

对于某个频繁更新的数据进行节流,每隔一段时间来更新数据
*/

const useDebounceRef = (value, delay) => {
    let timeoutId;
    return customRef((track, trigger) => ({
        get() {
            track() // 获取时追踪数据
            return value
        },
        set(newValue) {
            clearTimeout(timeoutId)
            // setTimeout 会放到队列中执行 ，clearTimeout会从队列中清除
            timeoutId = setTimeout(() => {
                value = newValue
                trigger() // 修改之后进行视图更新
            }, delay)
        }
    }))
}

const keyword = useDebounceRef('', 3000)
</script>

<template>
    <h2>customRef</h2>
    <input v-model="keyword" type="text">
    <div>{{ keyword }}</div>
</template>