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;
}

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>

<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>