Vue3使用customRef封裝防抖函數(shù)的方法詳解
什么是customRef?
創(chuàng)建一個(gè)自定義的 ref，并對(duì)其依賴項(xiàng)跟蹤和更新觸發(fā)進(jìn)行顯式控制。它需要一個(gè)工廠函數(shù)，該函數(shù)接收 track 和 trigger 函數(shù)作為參數(shù)，并且應(yīng)該返回一個(gè)帶有 get 和 set 的對(duì)象。
防抖 （多次觸發(fā) 只執(zhí)行最后一次）
作用： 高頻率觸發(fā)的事件,在指定的單位時(shí)間內(nèi)，只響應(yīng)最后一次，如果在指定的時(shí)間內(nèi)再次觸發(fā)，則重新計(jì)算時(shí)間
防抖類似于英雄聯(lián)盟回城6秒，如果回城中被打斷，再次回城需要再等6秒
使用customRef封裝防抖函數(shù)
import { customRef } from "vue";
//設(shè)置默認(rèn)的時(shí)間間隔為1000ms
export function debounceRef(value, duration = 1000) {
//閉包緩存計(jì)時(shí)器
let timer;
return customRef((tarck, trigger) => {
return {
get(){
//收集依賴
tarck();
return value;
},
set(val){
//短時(shí)間內(nèi)連續(xù)觸發(fā)改變這個(gè)val的事件,清除計(jì)時(shí)器,重新開始記時(shí)
clearTimeout(timer)
timer=setTimeout(()=>{
//派發(fā)更新
trigger()
value=val
},duration)
}
}
})
}可以在頁(yè)面中使用，對(duì)一個(gè)輸入框v-model輸入，然后一個(gè)文本標(biāo)簽顯示它的值
經(jīng)過(guò)測(cè)試，防抖效果成功實(shí)現(xiàn)，只有對(duì)輸入停止500ms后才會(huì)進(jìn)行對(duì)set函數(shù)的觸發(fā)
<template>
<div class="container">
<input v-model="text" placeholder="請(qǐng)輸入內(nèi)容" />
<p>{{ text }}</p>
</div>
</template>
<script setup>
import {debounceRef} from './debounce.js'
const text = debounceRef('',500);
</script>到此這篇關(guān)于Vue3使用customRef封裝防抖函數(shù)的方法詳解的文章就介紹到這了,更多相關(guān)Vue3 customRef封裝防抖函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近工作中有需要將一些前端頁(yè)面(如報(bào)表頁(yè)面等)導(dǎo)出為pdf的需求,下面這篇文章主要給大家介紹了關(guān)于vue3 如何將頁(yè)面生成 pdf 導(dǎo)出,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue框架提供了前端開發(fā)組件的思想，可以通過(guò)組件來(lái)組合成一個(gè)完整的頁(yè)面，都是隨著組件數(shù)量原來(lái)越多，組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式，需要的可以參考一下2022-01-01
element ui的el-input-number修改數(shù)值失效的問(wèn)題及解決
這篇文章主要介紹了element ui的el-input-number修改數(shù)值失效的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
因?yàn)樾鹿臼褂胷eact技術(shù)棧，包括Umi、Dva、Ant-design等一系列解決方案。本文就簡(jiǎn)單的介紹一下vue轉(zhuǎn)react入門指南，感興趣的可以了解一下2021-10-10
vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配
這篇文章主要介紹了vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配的相關(guān)知識(shí)，通過(guò)實(shí)例代碼介紹了vue用rem布局的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-09-09
vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
這篇文章主要介紹了vue+webpack實(shí)現(xiàn)異步加載的三種用法，文中給大家提到了vue+webpack實(shí)現(xiàn)異步組件加載的代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2018-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)學(xué)生管理功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本文提供了如何將Vue3的靜態(tài)頁(yè)面集成到基于Vue2的若依項(xiàng)目中,并確保能夠訪問(wèn)Vue2的接口,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-09-09
在開發(fā)中經(jīng)常有從列表跳到詳情頁(yè)，然后返回詳情頁(yè)的時(shí)候需要緩存列表頁(yè)的狀態(tài)（比如滾動(dòng)位置信息），這個(gè)時(shí)候就需要保存狀態(tài)，要緩存狀態(tài)2021-10-10
Vue使用JSEncrypt實(shí)現(xiàn)rsa加密及掛載方法
這篇文章主要介紹了Vue使用JSEncrypt實(shí)現(xiàn)rsa加密及掛載方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02