Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流
前言
今天給大家?guī)?lái)的是Vue 2 中的實(shí)現(xiàn) CustomRef 方式防抖/節(jié)流這篇文章，前幾天利用 customRef 實(shí)現(xiàn)了在 vue 3 中的極致防抖/節(jié)流的新方式。感興趣的朋友可以點(diǎn)擊 ?? Vue 3 中的極致防抖/節(jié)流（含常見方式防抖/節(jié)流） 進(jìn)行查看。
在前端的開發(fā)過(guò)程中，在涉及到與用戶交互的過(guò)程中是基本上都是需要處理的，常規(guī)操作就是在對(duì)應(yīng)位置加上防抖或者節(jié)流。
加上防抖或者節(jié)流的作用：一是為了防止用戶頻繁操作；二是為了節(jié)約一定的服務(wù)器資源，減少資源浪費(fèi)的情況。
背景
之所以寫這篇文章是因?yàn)樯赌?？我寫?a href="http://www.dhdzp.com/article/274440.htm" target="_blank">Vue 3 中的極致防抖/節(jié)流（含常見方式防抖/節(jié)流） 這篇文章后，突然萌發(fā)的一個(gè)問(wèn)題，心想既然 vue 3 可以通過(guò) customRef 實(shí)現(xiàn)，那 vue 2 是不是也可以這樣進(jìn)行照葫蘆畫瓢呢？然后我就想了一下，是可以的，然后加上今晚上有空，我就寫了一下，雖然沒(méi) vue 3 自帶的那么好，但還是很好用的。所以特此來(lái)分享一下。
有人說(shuō) vue 2 沒(méi) ref 和 customRef ??？
誒，別忘了有 proxy 和 Object.defineProperty 呀。
我這里實(shí)現(xiàn)的方式就采用的是 proxy, 然后實(shí)現(xiàn)后的效果和 customRef 差不多，只是在 template 模板中會(huì)帶個(gè) value 不能去掉。
開始吧！
擼代碼
我這里直接放代碼，每行代碼我都加了注釋的，方便閱讀，當(dāng)然朋友你有疑問(wèn)或者說(shuō)沒(méi)看懂的地方可以評(píng)論 + 私信。
防抖（debounce）
代碼
// 聲明
// data 為數(shù)據(jù)
// delay 為時(shí)間。delay = null 則直接不使用 防抖 方案
function debounceRef (data, delay = 300) {
// 定時(shí)器
let timer = null
// 數(shù)據(jù)
const value = {value: data}
// 創(chuàng)建 proxy 實(shí)例
const proxy = new Proxy(value, {
get(target, property) {
// 返回當(dāng)前值
return target[property]
},
// set 參數(shù)說(shuō)明
// target：目標(biāo), property：屬性, newValue 值, receiver：接收者
set(target, property, newValue, receiver) {
// 定時(shí)器判斷，如果存在則清除當(dāng)前定時(shí)器
if(timer != null){
// 清除定時(shí)器
clearTimeout(timer)
// 將 timer 恢復(fù)默認(rèn)值
timer = null
}
// 賦值并創(chuàng)建定時(shí)器
timer = setTimeout(() => {
// 修改值
target[property] = newValue
}, delay)
// 讓 set 一直返回 true
// 不返回 true，則會(huì)報(bào)下列錯(cuò)誤： 'set' on proxy: trap returned falsish for property 'value'
return true;
}
})
// 判斷 delay === null，等于則返回未代理的對(duì)象，反之
return delay === null ?value : proxy
}
使用
// 引入
import debounceRef from "./utils/debounceRef.js"
// 創(chuàng)建
data () {
return {
count: debounceRef(0, 300)
}
}
在頁(yè)面中使用：
// span
<span>{{ count.value }}</span>
// v-model
<input type="text" v-model="count.value">
在函數(shù)中使用：
// 函數(shù)
addCount () {
this.count.value += 1
}
節(jié)流（throttle）
代碼
// 聲明
// data 為數(shù)據(jù)
// delay 為時(shí)間。delay = null 則直接不使用 節(jié)流 方案
function throttleRef (data, delay = 300) {
// 定時(shí)器
let timer = null
// 數(shù)據(jù)
const value = {value: data}
// 創(chuàng)建 proxy 實(shí)例
const proxy = new Proxy(value, {
get(target, property) {
// 返回當(dāng)前值
return target[property]
},
// set 參數(shù)說(shuō)明
// target：目標(biāo), property：屬性, newValue 值, receiver：接收者
set(target, property, newValue, receiver) {
// 定時(shí)器判斷
if(timer === null){
// 賦值并創(chuàng)建定時(shí)器
timer = setTimeout(() => {
// 修改值
target[property] = newValue
// 清除定時(shí)器
clearTimeout(timer)
// 將 timer 恢復(fù)默認(rèn)值
timer = null
}, delay)
}
// 讓 set 一直返回 true
// 不返回 true，則會(huì)報(bào)下列錯(cuò)誤： 'set' on proxy: trap returned falsish for property 'value'
return true;
}
})
// 判斷 delay === null，等于則返回未代理的對(duì)象，反之
return delay === null ?value : proxy
}
使用
// 引入
import throttleRef from "./utils/throttleRef.js"
// 創(chuàng)建
data () {
return {
count: throttleRef(0, 300)
}
}
在頁(yè)面中使用：
// span
<span>{{ count.value }}</span>
// v-model
<input type="text" v-model="count.value">
在函數(shù)中使用：
// 函數(shù)
addCount () {
this.count.value += 1
}
總結(jié)
以上就是Vue 2 中的實(shí)現(xiàn) CustomRef 方式防抖/節(jié)流這篇文章的全部?jī)?nèi)容。受Vue 3 中的極致防抖/節(jié)流（含常見方式防抖/節(jié)流）中利用 customRef的啟發(fā)。
以上就是Vue 2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流的詳細(xì)內(nèi)容，更多關(guān)于Vue 2 CustomRef防抖節(jié)流的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- Vue3 組合式函數(shù)Composable最佳實(shí)戰(zhàn)
- Vue3 Ref獲取真實(shí)DOM學(xué)習(xí)實(shí)戰(zhàn)
- vue中this.$refs.name.offsetHeight獲取不到值問(wèn)題
- vue3+ts數(shù)組去重方及reactive/ref響應(yīng)式顯示流程分析
- VueJs中的shallowRef與shallowReactive函數(shù)使用比較
- 一文搞懂VueJs中customRef函數(shù)使用
- VueJs中toRef與toRefs函數(shù)對(duì)比詳解
- Vue3組合式函數(shù)Composable實(shí)戰(zhàn)ref和unref使用
相關(guān)文章
vue-cli webpack模板項(xiàng)目搭建及打包時(shí)路徑問(wèn)題的解決方法
這篇文章主要介紹了vue-cli webpack模板項(xiàng)目搭建以及打包時(shí)路徑問(wèn)題的解決方法,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細(xì)介紹了Vue?dialog模態(tài)框的封裝方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊
這篇文章主要介紹了iview實(shí)現(xiàn)動(dòng)態(tài)表單和自定義驗(yàn)證時(shí)間段重疊，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
Vue實(shí)現(xiàn)頁(yè)面添加滿屏水印和去除水印功能
在一些特殊的應(yīng)用場(chǎng)景中,可能需要在網(wǎng)頁(yè)上添加水印以保護(hù)版權(quán)或標(biāo)識(shí)信息,本文將介紹如何在Vue項(xiàng)目中添加滿屏水印并實(shí)現(xiàn)去除水印的功能,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要為大家介紹了vue?指令版富文本溢出省略截取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例
這篇文章主要為大家詳細(xì)介紹了Vue.js手風(fēng)琴菜單組件開發(fā)實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案(推薦)
這篇文章主要介紹了Vue項(xiàng)目通過(guò)vue-i18n實(shí)現(xiàn)國(guó)際化方案,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue中實(shí)現(xiàn)彈出層動(dòng)畫效果的示例代碼
這篇文章主要介紹了vue中怎樣實(shí)現(xiàn)彈出層動(dòng)畫效果，由上而下漸漸顯示，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-09
Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法
這篇文章主要介紹了Vue3+ElementUI 多選框中復(fù)選框和名字點(diǎn)擊方法效果分離方法,文中補(bǔ)充介紹了VUE-Element組件 CheckBox多選框使用方法,需要的朋友可以參考下2024-01-01
Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)
本文主要介紹了Vue出現(xiàn)彈出層時(shí)禁止底部頁(yè)面跟隨滑動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07