Vue 2 中实现 CustomRef 方式防抖/节流

今天给大家带来的是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章，前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式。感兴趣的朋友可以点击 Vue 3 中的极致防抖/节流（含常见方式防抖/节流） 进行查看。

前言

在前端的开发过程中，在涉及到与用户交互的过程中是基本上都是需要处理的，常规操作就是在对应位置加上防抖或者节流。

加上防抖或者节流的作用：一是为了防止用户频繁操作；二是为了节约一定的服务器资源，减少资源浪费的情况。

背景

之所以写这篇文章是因为啥呢？我写完Vue 3 中的极致防抖/节流（含常见方式防抖/节流） 这篇文章后，突然萌发的一个问题，心想既然 vue 3 可以通过 customRef 实现，那 vue 2 是不是也可以这样进行照葫芦画瓢呢？然后我就想了一下，是可以的，然后加上今晚上有空，我就写了一下，虽然没 vue 3 自带的那么好，但还是很好用的。所以特此来分享一下。

有人说 vue 2 没 ref 和 customRef 啊？

诶，别忘了有 proxy 和 Object.defineProperty 呀。

我这里实现的方式就采用的是 proxy, 然后实现后的效果和 customRef 差不多，只是在 template 模板中会带个 value 不能去掉。

开始吧！

撸代码

我这里直接放代码，每行代码我都加了注释的，方便阅读，当然朋友你有疑问或者说没看懂的地方可以评论 + 私信。

防抖（debounce）

代码

// 声明
// data 为数据
// delay 为时间。delay = null 则直接不使用 防抖 方案
function debounceRef (data, delay = 300) {
    // 定时器
    let timer = null
    // 数据
    const value = {value: data}
    // 创建 proxy 实例
    const proxy = new Proxy(value, {
        get(target, property) {
            // 返回当前值
            return target[property]
        },
        // set 参数说明
        // target：目标, property：属性, newValue 值, receiver：接收者
        set(target, property, newValue, receiver) {
            // 定时器判断，如果存在则清除当前定时器
            if(timer != null){
                // 清除定时器
                clearTimeout(timer)
                // 将 timer 恢复默认值
                timer = null
            }
            // 赋值并创建定时器
            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"

// 创建
data () {
  return {
      count: debounceRef(0, 300)
  }
}

在页面中使用：

// span
<span>{{ count.value }}span>

// v-model
<input type="text" v-model="count.value">

在函数中使用：

// 函数
addCount () {
    this.count.value += 1            
}

节流（throttle）

代码

// 声明
// data 为数据
// delay 为时间。delay = null 则直接不使用 节流 方案
function throttleRef (data, delay = 300) {
    // 定时器
    let timer = null
    // 数据
    const value = {value: data}
    // 创建 proxy 实例
    const proxy = new Proxy(value, {
        get(target, property) {
            // 返回当前值
            return target[property]
        },
        // set 参数说明
        // target：目标, property：属性, newValue 值, receiver：接收者
        set(target, property, newValue, receiver) {
             // 定时器判断
            if(timer === null){
                // 赋值并创建定时器
                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"

// 创建
data () {
  return {
      count: throttleRef(0, 300)
  }
}

在页面中使用：

// span
<span>{{ count.value }}span>

// v-model
<input type="text" v-model="count.value">

在函数中使用：

// 函数
addCount () {
    this.count.value += 1            
}

总结

以上就是Vue 2 中的实现 CustomRef 方式防抖/节流这篇文章的全部内容。受Vue 3 中的极致防抖/节流（含常见方式防抖/节流）中利用 customRef的启发。

希望本篇文章对朋友你在使用 vue 2的过程中有所帮助。若篇中有不足之处或你有不一样的想法或见解，欢迎在评论区留言 + 关注。

我是桃小瑞，公众号 @ 桃小瑞。