VUE框架Vue3使用自定义的ref实现延迟加载效果的实现解决setTimeout过多导致的抖动问题------VUE框架

import {customRef} from "vue";
export default function(){
    // 自己定义一个ref
    function useDebouncedRef(value){
        // 自定义的ref函数体需要符合ref规范
        // 通过调用customRef来获取一个ref实例
        // 调用customRef必须要给出一个回调函数作为形参factory
        // 对于这个factory函数来说,有两个重要参数track,trigger
        // track是追踪的意思,trigger是触发的意思
        const x = customRef((track,trigger)=>{
            let t;
            // 这个factory回调函数必须有返回对象
            // 且这个返回必须有get(set非必须)
            return {
                // 模板语句只要使用到该数据,get会自动调用
                get(){
                    console.log("get执行了");
                    // 还要在get里面用track追踪告诉vue这个value发生的变化
                    track();
                    return value;
                },
                // 模板语句修改该数据会自动调用set方法
                set(newValue){
                    console.log("set执行了");
                    // 如果输入较快会导致底层同时出现多个setTimeout函数
                    // 会导致抖动问题的出现(屏幕上内容闪烁跳动)
                    clearTimeout(t);
                    // 成功解决了防抖问题
                    t = setTimeout(() => {
                        value = newValue;
                        // 触发一下即通知去调用get方法
                        trigger();
                    },1000);
                }
            }
        });
        return x;
    }
    let name = useDebouncedRef("");
    return name;
}

<template>
    <input type="text" v-model="name"/>
    <br>
    <h1>{{ name }}</h1>
</template>
 
<script>
import inputName from './hooks/inputName';
export default {
    name : "App",
    setup(){
        let name = inputName();
        // 使用自定义的ref
        // 创建防抖REF
        return {name};
    }
}
</script>
 
<style>
 
</style>