1.customRef

• customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数。
• 两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象。track()告诉vue追踪数据，trigger()告诉vue更新界面。

实例： 使用 customRef 实现防抖效果的示例。

<template>
    <h2>customRef效果</h2>
    <input v-model="keyword" placeholder="搜索关键字"/>
    <p>{{keyword}}</p>
</template>

<script lang="ts">
    /*
    customRef:
      创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制

    需求:
      使用 customRef 实现 debounce 的示例
    */

    import {
        ref,
        customRef
    } from 'vue'

    export default {
        setup () {
            const keyword = useDebouncedRef('', 300)
            console.log(keyword)
            return {
                keyword
            }
        },
    }

    /*
    实现函数防抖的自定义ref
    value:要监测的数据
    delay:默认延时200毫秒
    */
    function useDebouncedRef<T>(value: T, delay = 200) {
        let timerId: number  //定时器对象
        return customRef((track, trigger) => {
            return {
                get() {
                    // 告诉Vue追踪数据
                    track()
                    return value
                },
                set(newValue: T) {
                    clearTimeout(timerId)
                    timerId = setTimeout(() => {
                        value = newValue
                        // 告诉Vue去触发界面更新
                        trigger()
                    }, delay)
                }
            }
        })
    }
</script>