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中实现CustomRef方式防抖节流的详细内容，更多关于Vue 2 CustomRef防抖节流的资料请关注脚本之家其它相关文章！
相关文章
横向滚动这个功能是我们日常开发中经常会遇到的一个需求,下面这篇文章主要给大家介绍了关于Vue中如何利用better-scroll组件实现横向滚动的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家介绍了Vue2 Observer实例dep和闭包中dep区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
本文主要介绍了vue3封装数字滚动组件的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
vue表单验证你真的会了吗？vue表单验证（form）validate
这篇文章主要介绍了vue表单验证你真的会了吗？vue表单验证（form）validate,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
el-select单选时选择后输入框的is-focus状态并没有取消问题解决
这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下2024-01-01
最近项目中有一个校验身份证号手机号的业务,索性给大家总结下,这篇文章主要给大家介绍了关于vue3表单参数校验及正则表达式的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue watch深度监听对象实现数据联动的方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-08-08
vue项目中将element-ui table表格写成组件的实现代码
这篇文章主要介绍了vue项目中将element-ui table表格写成组件的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
本文主要介绍了vue-router4版本第一次打开界面不匹配路由问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了windows下vue.js开发环境搭建教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
最新评论