Vue3 - customRef的使用

作用：
(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数
(2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象

<template>
    <div id="nav">
        <h2>{{msg}}</h2>
        <input type="text" v-model="msg"/>
    </div>
</template>
<script lang="ts">
    import {defineComponent,ref,customRef} from "vue"
    // 自定义hook防抖函数
    // value传入的数据，将来数据类型不确定，所以用泛型。delay防抖的间隔时间，默认200ms

    function useDebouncedRef<T>(value:T,delay = 200) {
        // 准备一个存储定时器的id的变量
        let timeOutId: number
        return customRef((track,trigger) => {
            return {
                get() {
                    // 告诉Vue追踪数据
                    track()
                    return value
                },
                set(newValue:T) {
                    // 清除定时器
                    clearTimeout(timeOutId)
                    // 开启计时器
                    setTimeout(()=> {
                        value = newValue;
                        // 告诉Vue更新界面
                        trigger()
                    },delay)
                }
            }
        })
    }

    export default (defineComponent)({
        setup() {
            const msg = useDebouncedRef('hhh',500);
            return {
                msg
            }
        }
    })
</script>

<style>

</style>

track()告诉vue追踪数据
trigger()告诉vue更新界面