Vue 2 中的实现 CustomRef 方法 防抖/节省

首页>>网站学院>>前端知识

999+

       今天给大家带来的是vue 2 中的实现 CustomRef 方式防抖/节流这篇文章,前几天利用 customRef 实现了在 vue 3 中的极致防抖/节流的新方式。

image.png

前言

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

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

背景

之所以写这篇文章是因为啥呢?我写完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的启发。


发布留言:


留言信息(最新3条):

昵称:A****nda 时间:2023-04-13 10:23:34

留言:麻烦帮我改下模板代码咧 什么时候比较方便

昵称:WSS素材网 时间:2023-04-13 10:23:34

回复:请添加微信:Wisdom-boylin 或 添加QQ:584244711

昵称:炸****趴菜。 时间:2023-04-12 15:14:27

留言:兄弟 我需要个蜘蛛池啊 有没介绍看到加我

昵称:WSS素材网 时间:2023-04-12 15:14:27

回复:请添加微信:Wisdom-boylin 或 添加QQ:584244711

昵称:彩****的雨云 时间:2023-04-12 14:47:10

留言:我想咨询下你们做不做小旋风超级模板的 需要10套

昵称:WSS素材网 时间:2023-04-12 14:47:10

回复:请添加微信:Wisdom-boylin 或 添加QQ:584244711


版权声明:本文为「WSS素材网」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。  
原文链接:https://wsstp.com/fore/65.html