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