vue使用lodash中debounce(防抖函數(shù))的幾種方法實(shí)現(xiàn)
更新時(shí)間：2025年02月12日 09:23:11 作者：晚時(shí)之秋
本文主要介紹了vue使用lodash中debounce(防抖函數(shù))的幾種方法實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
1、安裝
npm i --save lodash.debounce
2、引入
import debounce from 'lodash.debounce'
3、使用
<van-search v-model="searchValue" placeholder="輸入姓名或工號(hào)" @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中寫(xiě)好方法，在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 對(duì)象，包括方法，會(huì)被組件實(shí)例重用。
如果網(wǎng)頁(yè)中有 2 個(gè)以上的組件實(shí)例，那么所有的組件都會(huì)應(yīng)用 相同 的防抖函數(shù) methods.debouncedHandler — 這會(huì)導(dǎo)致防抖出現(xiàn)故障。
到此這篇關(guān)于vue使用lodash中debounce(防抖函數(shù))的幾種方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue debounce防抖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化
這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
文章主要介紹在 Vue3 中實(shí)現(xiàn)虛擬列表的方法,包括原理和代碼實(shí)現(xiàn),原理是只渲染可視區(qū)域內(nèi)的列表項(xiàng),通過(guò)設(shè)置子數(shù)據(jù)項(xiàng)高度、計(jì)算可視區(qū)域、渲染可視區(qū)域、滾動(dòng)監(jiān)聽(tīng)、設(shè)置緩沖列表項(xiàng)等提升性能,感興趣的小伙伴跟著小編一起來(lái)看看吧2025-01-01
elementui之el-table-column日期格式顯示方式
文章介紹了如何使用formatter屬性對(duì)表格某一列的內(nèi)容進(jìn)行日期格式化,通過(guò)綁定日期格式化的方法實(shí)現(xiàn),展示了前端代碼的模板和方法,并給出了前端效果的展示2024-12-12
vue中實(shí)現(xiàn)methods一個(gè)方法調(diào)用另外一個(gè)方法
下面小編就為大家分享一篇vue中實(shí)現(xiàn)methods一個(gè)方法調(diào)用另外一個(gè)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于如何啟動(dòng)node.js文件的3個(gè)方法,文中通過(guò)圖文以及實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
vue-cli 是 vue.js 的腳手架工具，可以幫助我們編寫(xiě)基礎(chǔ)代碼、快速搭建開(kāi)發(fā)環(huán)境。下面這篇文章主要給大家介紹了關(guān)于vue-cli初始化項(xiàng)目中使用less的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起看看吧2018-08-08
使用Vue與WebSocket創(chuàng)建實(shí)時(shí)通知系統(tǒng)
在現(xiàn)代應(yīng)用開(kāi)發(fā)中,實(shí)時(shí)性已成為用戶體驗(yàn)的一個(gè)重要組成部分,ue 作為一款流行的前端框架,配合 WebSocket,可以輕松構(gòu)建實(shí)時(shí)通知系統(tǒng),在本文中,我們將通過(guò)一個(gè)簡(jiǎn)單的示例,使用 Vue 3 的 Composition API（setup 語(yǔ)法糖）來(lái)創(chuàng)建一個(gè)實(shí)時(shí)通知系統(tǒng)2024-11-11
基于Vue的SPA動(dòng)態(tài)修改頁(yè)面title的方法(推薦)
這篇文章主要介紹了基于Vue的SPA動(dòng)態(tài)修改頁(yè)面title的方法,需要的朋友可以參考下2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)輪播圖幀率播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
Vue3結(jié)合vue-cropper實(shí)現(xiàn)圖片裁剪預(yù)覽功能
??Vue-Cropper?? 是一個(gè)基于 Vue.js 的圖片裁剪組件庫(kù),專(zhuān)為 Web 應(yīng)用設(shè)計(jì),這篇文章主要為大家介紹了如何使用vue-cropper實(shí)現(xiàn)圖片裁剪預(yù)覽功能,需要的可以了解下2025-05-05