vue3的customRef实现自定义ref

• customRef :创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显示控制，我们可以手动写set和get里的逻辑
• customRef就像一辆手动挡车可玩性高，ref就是自动挡车
• 使用customRef实现防抖效果(在规定时间无论触发多少次方法，只执行最后一次)，上代码

<template>
    <!-- 实现一个效果，input输入数据，然后输入框下面同时显示数据但是，是延迟一秒之后 -->
    <input type="text" v-model="word">
    <span>{{ word }}</span>
</template>
<script>
import { customRef } from 'vue';
export default {
    name: 'toRef',
    setup() {
        function myRef(value, delay) {
            return customRef((track, trigger) => { // 这里有两个参数
                let timer;// 用于接收定时器
                return {
                    get() {
                        console.log('get调用了');
                        // 读取数据时会自动调用该方法
                        track();// 这个方法会通知vue追踪value的变化
                        return value;
                    },
                    set(newValue) {// 有个参数，是新修改的数据我们在set里进行赋值
                        console.log('set调用了');
                        clearTimeout(timer);// 使用前先清空定时器，免得创建很多定时器，在输入时就会出现抖动的效果
                        // 修改数据时会自动调用该方法
                        timer = setTimeout(() => {
                            value = newValue;
                            trigger(); // 这个方法会通知vue去解析模版(解析就会调用get去获取新的数据了)
                        }, delay);
                    }
                }
            })
        };
        let word = myRef('a', 1000);
        return {
            word
        };
    }
}
</script>