Vue3使用customRef封装防抖函数

什么是customRef?

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

防抖 （多次触发 只执行最后一次）

作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒

使用customRef封装防抖函数

import { customRef } from "vue";

//设置默认的时间间隔为1000ms
export function debounceRef(value, duration = 1000) {
    //闭包缓存计时器
    let timer;
    return customRef((tarck, trigger) => {
        return {
            get(){
                //收集依赖
                tarck();
                return value;
            },
            set(val){
                //短时间内连续触发改变这个val的事件,清除计时器,重新开始记时
                clearTimeout(timer)
                timer=setTimeout(()=>{
                    //派发更新
                    trigger()
                    value=val
                },duration)
            }
        }
    })
}

可以在页面中使用，对一个输入框v-model输入，然后一个文本标签显示它的值

经过测试，防抖效果成功实现，只有对输入停止500ms后才会进行对set函数的触发

<template>
  <div class="container">
    <input v-model="text" placeholder="请输入内容" />
    <p>{{ text }}</p>
  </div>
</template>

<script setup>
import {debounceRef} from './debounce.js'
const text = debounceRef('',500);
</script>