Vue3使用customRef封装防抖函数的方法详解

更新时间：2023年09月04日 09:16:29 作者：丢丢biubiu

防抖函数的作用是高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间,本文将给大家详细的介绍一下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>

到此这篇关于Vue3使用customRef封装防抖函数的方法详解的文章就介绍到这了,更多相关Vue3 customRef封装防抖函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue 组件封装并使用 NPM 发布的教程
这篇文章主要介绍了Vue 组件封装并使用 NPM 发布的教程,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
带你熟练掌握Vue3之Pinia状态管理
pinia是vue3官方的状态管理工具,当然vue2也可以用,vue2中的状态管理工具是vuex,vue3中不再使用vuex,推荐使用的是pinia,和vuex差不多,但比vuex更方便、更强、更好,下面这篇文章主要给大家介绍了关于Vue3之Pinia状态管理的相关资料,需要的朋友可以参考下
2022-11-11
vue实现商城上货组件简易版
这篇文章主要为大家详细介绍了vue实现商城上货组件简易版，50行js代码实现效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
Vue源码解析之数组变异的实现
这篇文章主要介绍了Vue源码解析之数组变异的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
使用Vue父子组件通信实现todolist的功能示例代码
这篇文章主要给大家介绍了关于如何使用Vue父子组件通信实现todolist的功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
vue el-table实现递归嵌套的示例代码
本文主要介绍了vue el-table实现递归嵌套的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
Vue $attrs & inheritAttr实现button禁用效果案例
这篇文章主要介绍了Vue $attrs & inheritAttr实现button禁用效果案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-12-12
vue-cli 引入jQuery，Bootstrap，popper的方法
这篇文章主要介绍了vue-cli 引入jQuery，Bootstrap，popper的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue+px2rem实现pc端大屏自适应的实例代码(rem适配)
不管是移动端的适配,还是大屏需求,都离不开不一个单位rem,rem是相对于根元素的字体大小的单位,下面这篇文章主要给大家介绍了关于vue+px2rem实现pc端大屏自适应的相关资料,需要的朋友可以参考下
2021-08-08
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
最近接了个项目需要开发一个app项目，由于是第一次接触这种app开发，经过一番思考，决定使用Vue3+Vant前端组件的模式进行开发，下面把问题分析及实现代码分享给大家，需要的朋友参考下吧
2021-06-06