vue?watch監(jiān)聽觸發(fā)優(yōu)化搜索框的性能防抖節(jié)流的比較
概要
- "實(shí)現(xiàn)搜索框防抖功能的方法"
- "搜索框防抖和節(jié)流的區(qū)別及應(yīng)用場(chǎng)景"
- "如何優(yōu)化搜索框的性能：防抖和節(jié)流的比較"
- "搜索框防抖技術(shù)的原理和實(shí)現(xiàn)方式"
- "提升搜索框響應(yīng)速度的技巧：防抖和節(jié)流的應(yīng)用"
實(shí)例
<template>
<div>
<el-input v-model="search" />
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
search: '',
timer:null
}
},
watch: {
search: {
handler (newVal, oldVal) {
if (this.timer) {
clearTimeout(this.timer)
}
this.timer = setTimeout(() => {
this.getGoods();
}, 1000)
},
deep: true
}
},
methods: {
getGoods(){
console.log('請(qǐng)求一次')
}
}
}
</script>擴(kuò)充知識(shí)點(diǎn)
什么是防抖
防抖，即短時(shí)間內(nèi)大量觸發(fā)同一事件，只會(huì)執(zhí)行一次函數(shù)，實(shí)現(xiàn)原理為設(shè)置一個(gè)定時(shí)器，約定在xx毫秒后再觸發(fā)事件處理，每次觸發(fā)事件都會(huì)重新設(shè)置計(jì)時(shí)器，直到xx毫秒內(nèi)無(wú)第二次操作，防抖常用于搜索框/滾動(dòng)條的監(jiān)聽事件處理，如果不做防抖，每輸入一個(gè)字/滾動(dòng)屏幕，都會(huì)觸發(fā)事件處理，造成性能浪費(fèi)。
什么是截流
防抖是延遲執(zhí)行，而節(jié)流是間隔執(zhí)行，函數(shù)節(jié)流即每隔一段時(shí)間就執(zhí)行一次，實(shí)現(xiàn)原理為設(shè)置一個(gè)定時(shí)器，約定xx毫秒后執(zhí)行事件，如果時(shí)間到了，那么執(zhí)行函數(shù)并重置定時(shí)器，和防抖的區(qū)別在于，防抖每次觸發(fā)事件都重置定時(shí)器，而節(jié)流在定時(shí)器到時(shí)間后再清空定時(shí)器
以上就是vue watch監(jiān)聽觸發(fā)優(yōu)化搜索框的性能防抖節(jié)流的比較的詳細(xì)內(nèi)容，更多關(guān)于vue watch監(jiān)聽觸發(fā)防抖的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue進(jìn)行數(shù)據(jù)可視化圖表展示的實(shí)現(xiàn)示例
數(shù)據(jù)可視化是現(xiàn)代化的數(shù)據(jù)分析和展示方式,可以使數(shù)據(jù)更加直觀、易于理解和傳達(dá),Vue作為一款流行的前端框架,提供了豐富的插件和工具來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化圖表展示,本文將介紹如何使用Vue和Echarts/D3.js來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化圖表展示,并提供示例代碼和實(shí)際應(yīng)用場(chǎng)景2023-10-10
Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程
這篇文章主要介紹了Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程,文中通過(guò)示例介紹了vue3拖拽組件vuedraggable的使用demo，需要的朋友可以參考下2023-06-06
Vue實(shí)現(xiàn)移除數(shù)組中特定元素的方法小結(jié)
這篇文章主要介紹了Vue如何優(yōu)雅地移除數(shù)組中的特定元素,文中介紹了單個(gè)去除和批量去除的操作方法,并通過(guò)代碼示例講解的非常詳細(xì),具有一定的參考價(jià)值,需要的朋友可以參考下2024-03-03
Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問(wèn)題(遇到的坑,以及解決辦法),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue element-ui v-for循環(huán)el-upload上傳圖片 動(dòng)態(tài)添加、刪除方式
這篇文章主要介紹了vue element-ui v-for循環(huán)el-upload上傳圖片 動(dòng)態(tài)添加、刪除方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3 Element-plus el-menu無(wú)限級(jí)菜單組件封裝過(guò)程
對(duì)于element中提供給我們的el-menu組件最多可以實(shí)現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過(guò)變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進(jìn)行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無(wú)限級(jí)菜單組件封裝,需要的朋友可以參考下2023-04-04
在現(xiàn)代應(yīng)用程序中，日志是一項(xiàng)重要的功能，用于幫助開發(fā)人員和運(yùn)維人員了解應(yīng)用程序的行為并進(jìn)行故障排除，本文將介紹如何在Vue應(yīng)用程序中實(shí)現(xiàn)分布式日志管理和日志分析功能，感興趣的可以了解一下2023-06-06
vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)宮格輪轉(zhuǎn)抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)圖片放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08