Vue 2中实现CustomRef方式防抖节流
目录
- 前言
- 背景
- 撸代码
- 防抖(debounce)
- 代码
- 使用
- 节流(throttle)
- 代码
- 使用
- 总结
前言
今天给大家带来的是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中实现CustomRef方式防抖节流的详细内容,更多关于Vue 2 CustomRef防抖节流的资料请关注我们其它相关文章!