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í)器,重新開(kāi)始記時(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)文章
vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值
今天小編就為大家分享一篇vue 實(shí)現(xiàn)單選框設(shè)置默認(rèn)選中值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
本文主要介紹了解決vue.js not detected的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了vue-cli中打包圖片路徑錯(cuò)誤的解決方法 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
深入解析el-col-group強(qiáng)大且靈活的Element表格列組件
這篇文章主要為大家介紹了el-col-group強(qiáng)大且靈活的Element表格列組件深入解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了Vue源碼探究之狀態(tài)初始化，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法例子
當(dāng)我們?cè)陂_(kāi)發(fā)應(yīng)用時(shí)經(jīng)常需要對(duì)表單進(jìn)行校驗(yàn),以確保用戶輸入的數(shù)據(jù)符合預(yù)期,這篇文章主要給大家介紹了關(guān)于前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法的相關(guān)資料,需要的朋友可以參考下2023-12-12
今天小編就為大家分享一篇vue+element導(dǎo)航欄高亮顯示的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
解決element-ui的el-select選擇器的@blur事件失效的坑
這篇文章主要介紹了解決element-ui的el-select選擇器的@blur事件失效的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作
這篇文章主要介紹了vue內(nèi)置組件component--通過(guò)is屬性動(dòng)態(tài)渲染組件操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要介紹了在vue中安裝使用vux的教程，本文給大家記錄了vuex的安裝使用過(guò)程，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09