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