vue使用lodash中debounce(防抖函數(shù))的幾種方法實現(xiàn)
更新時間：2025年02月12日 09:23:11 作者：晚時之秋
本文主要介紹了vue使用lodash中debounce(防抖函數(shù))的幾種方法實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
1、安裝
npm i --save lodash.debounce
2、引入
import debounce from 'lodash.debounce'
3、使用
<van-search v-model="searchValue" placeholder="輸入姓名或工號" @input='handleInput' />
第一種：
handleInput: debounce(function (val) {
console.log(val)
}, 200)
第二種：
handleInput(val) {
console.log(val)
}
created() {
this.handleInput = debounce(this.handleInput, 200) // 搜索框防抖
}
這兩種使用方式效果一樣
觀察者防抖：
<template>
<input v-model="value" type="text" />
<p>{{ value }}</p>
</template>
<script>
import debounce from "lodash.debounce";
export default {
data() {
return {
value: "",
};
},
watch: {
value(...args) {
this.debouncedWatch(...args);
},
},
created() {
this.debouncedWatch = debounce((newValue, oldValue) => {
console.log('New value:', newValue);
}, 500);
},
beforeUnmount() {
this.debouncedWatch.cancel();
},
};
</script>
事件處理器防抖：
<template>
<input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
created() {
this.debouncedHandler = debounce(event => {
console.log('New value:', event.target.value);
}, 500);
},
beforeUnmount() {
this.debouncedHandler.cancel();
}
};
</script>
為什么不在method中寫好方法，在template中直接調(diào)用，就像這樣
<template>
<input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
methods: {
// Don't do this!
debouncedHandler: debounce(function(event) {
console.log('New value:', event.target.value);
}, 500)
}
};
</script>
組件使用 export default { … } 導(dǎo)出的 options 對象，包括方法，會被組件實例重用。
如果網(wǎng)頁中有 2 個以上的組件實例，那么所有的組件都會應(yīng)用 相同 的防抖函數(shù) methods.debouncedHandler — 這會導(dǎo)致防抖出現(xiàn)故障。
到此這篇關(guān)于vue使用lodash中debounce(防抖函數(shù))的幾種方法實現(xiàn)的文章就介紹到這了,更多相關(guān)vue debounce防抖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
隨著 Vite2 的發(fā)布并日趨穩(wěn)定，現(xiàn)在越來越多的項目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項目的實現(xiàn)步驟，感興趣的可以了解一下2021-07-07
electron+vue實現(xiàn)div contenteditable截圖功能
這篇文章主要介紹了electron+vue實現(xiàn)div contenteditable截圖功能,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-01-01
Vue.js作為目前最熱門最具前景的前端框架之一,其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項目的新的思維模式,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue制作一個猜拳小游戲的相關(guān)資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了axios在Vue項目中用來向后臺發(fā)送請求（調(diào)接口API），獲取響應(yīng)信息的方法,axios 是一個輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來執(zhí)行 HTTP 請求，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2022-07-07
Vue?Router在Vue.js的核心庫上提供了路由的功能,使得我們可以在單頁應(yīng)用中實現(xiàn)頁面的切換、跳轉(zhuǎn)和參數(shù)傳遞等功能,本文主要介紹了Vue3中嵌套路由和編程式路由的實現(xiàn),感興趣的可以了解一下2023-12-12
本篇文章給大家分享了vue移動端路由切換實例以及相關(guān)知識點，對此有興趣的朋友可以參考學(xué)習下。2018-05-05
這篇文章主要為大家介紹了vue.js項目中使用原生js實現(xiàn)移動端的輪播圖，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流
這篇文章主要為大家介紹了Vue?2中實現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了Vue中的baseurl如何配置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細介紹了Vue.js框架實現(xiàn)購物車功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06