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)文章
vue3.0 CLI - 2.1 - component 組件入門教程
這篇文章主要介紹了vue3.0 CLI - 2.1 - component 組件入門教程,本文主要的關(guān)注點就是組件，本文通過實例代碼相結(jié)合的形式給大家介紹的非常詳細，需要的朋友可以參考下2018-09-09
vue element upload組件 file-list的動態(tài)綁定實現(xiàn)
這篇文章主要介紹了vue element upload組件 file-list的動態(tài)綁定實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
Vant是一個強大的移動端組件庫,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要為大家介紹vue3中的vant組件引入使用的方法,希望對大家有所幫助2023-10-10
vue3中v-for報錯'item'is?of?type'unknown'的
在寫vue3+ts的項目,得到一個數(shù)組,需要循環(huán)展示,使用v-for循環(huán),寫完之后發(fā)現(xiàn)有個報錯,接下來通過本文給大家介紹vue3中v-for報錯?‘item‘?is?of?type?‘unknown‘的解決方法,感興趣的朋友一起看看吧2023-11-11
在?Vue.js?中,你可以通過多種方式將樣式私有化,以確保樣式只作用于特定的組件,避免全局污染,本文整理了一些常用的方法,希望對大家有所幫助2024-11-11
vue3+vite+electron構(gòu)建項目完整實例代碼
Electron+Vite+Vue3的組合為開發(fā)者提供了一個高效、靈活的跨平臺桌面應(yīng)用開發(fā)框架,下面這篇文章主要介紹了vue3+vite+electron構(gòu)建項目的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2026-03-03
v-model 是 vue.js 提供的語法糖，根據(jù)不同的表單控件監(jiān)聽不同的事件，實現(xiàn)對表單控件的數(shù)據(jù)雙向綁定。這篇文章主要介紹了vue 表單輸入格式化中文輸入法異常,需要的朋友可以參考下2018-05-05
Vue.js實現(xiàn)實例搜索應(yīng)用功能詳細代碼
本文給大家分享Vue.js實現(xiàn)實例搜索應(yīng)用功能詳細代碼，非常不錯，感興趣的朋友參考下吧2017-08-08
富文本編輯器quill.js?開發(fā)之自定義插件示例詳解
這篇文章主要為大家介紹了富文本編輯器quill.js?開發(fā)之自定義插件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08