欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流

 更新時(shí)間：2023年02月12日 15:04:49   作者：桃小瑞  
這篇文章主要為大家介紹了Vue?2中實(shí)現(xiàn)CustomRef方式防抖節(jié)流示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

今天給大家?guī)?lái)的是Vue 2 中的實(shí)現(xiàn) CustomRef 方式防抖/節(jié)流這篇文章，前幾天利用 customRef 實(shí)現(xiàn)了在 vue 3 中的極致防抖/節(jié)流的新方式。感興趣的朋友可以點(diǎn)擊 ?? Vue 3 中的極致防抖/節(jié)流（含常見(jiàn)方式防抖/節(jié)流） 進(jìn)行查看。

在前端的開(kāi)發(fā)過(guò)程中，在涉及到與用戶(hù)交互的過(guò)程中是基本上都是需要處理的，常規(guī)操作就是在對(duì)應(yīng)位置加上防抖或者節(jié)流。

加上防抖或者節(jié)流的作用：一是為了防止用戶(hù)頻繁操作；二是為了節(jié)約一定的服務(wù)器資源，減少資源浪費(fèi)的情況。

背景

之所以寫(xiě)這篇文章是因?yàn)樯赌?？我?xiě)完Vue 3 中的極致防抖/節(jié)流（含常見(jiàn)方式防抖/節(jié)流） 這篇文章后，突然萌發(fā)的一個(gè)問(wèn)題，心想既然 vue 3 可以通過(guò) customRef 實(shí)現(xiàn)，那 vue 2 是不是也可以這樣進(jìn)行照葫蘆畫(huà)瓢呢？然后我就想了一下，是可以的，然后加上今晚上有空，我就寫(xiě)了一下，雖然沒(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 不能去掉。

開(kāi)始吧！

擼代碼

我這里直接放代碼，每行代碼我都加了注釋的，方便閱讀，當(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àn)方式防抖/節(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)文章！

相關(guān)文章

最新評(píng)論