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

目录
  • 前言
  • 背景
  • 撸代码
    • 防抖(debounce)
      • 代码
      • 使用
    • 节流(throttle)
      • 代码
      • 使用
  • 总结

前言

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

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

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

背景

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

有人说 vue 2refcustomRef 啊?

诶,别忘了有 proxyObject.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防抖节流的资料请关注我们其它相关文章!

(0)

相关推荐

  • 一文搞懂VueJs中customRef函数使用

    目录 前言 示例-延迟显示 总结 前言 ref是Vue官方提供的componsition API,将一个非响应式数据转变为响应式数据的函数,至于底层怎么实现数据的收集与响应式 使用者无需去关注,相当于就是精装电脑,然而有时候,针对一些复杂特殊的需求,我们需要自己造轮子,自己手动原生的去实现内部结构 实现基础的功能的同时,还要进行额外的拓展,那么这时候就需要自定义ref了的,它就相当于是组装式的电脑,内部结构需要自己去组装,实现 而非直接从商城里购买,用一些现成的零部件组装一个类似精装的电脑,甚至

  • Vue2 Dialog弹窗函数式调用实践示例

    目录 前言 Vue2 的弹窗常用的使用方式 第一种:将弹窗写在上下文中 第二种:原型上注入全局方法 第三种:通过依赖注入的方式 合理的使用方式 功能实现 结语 前言 Dialog 对话框组件几乎是每个前端项目必不可少的组件,通常是在保留当前页面状态并屏蔽其他用户输入的情况下,与用户交互并承载相关操作. 在 BOM 的方法中,alert.prompt 都是以前用来做类似功能的方法,但是这些浏览器内置方法会完全停止网页代码执行,对于贫乏的前端线程资源来说实在是过于僵硬.于是便产生了各种各样的 Js

  • VueJs中toRef与toRefs函数对比详解

    目录 正文 toRef()函数 与ref的不同 toRefs()函数 为啥需要toRef()与toRefs()函数 总结 正文 ref是处理基本数据类型响应式API函数,在setup中声明定义的变量,可以直接在模板中使用 没有被响应式API包裹处理的变量数据,是不具备响应式能力的 也就是往往在逻辑中修改了数据,但是页面不会更新,那怎么样将一个非响应式数据变成响应式数据 就需要用到toRef()与toRefs()这两个componsition API的 单纯的去看概念,往往比较抽象,是难以理解的,

  • vueJs函数readonly与shallowReadonly使用对比详解

    目录 前言 readonly shallowreadonly 总结 前言 在使用vue3开发项目时,对于一些特殊的需求,针对有些数据字段,在前端,只允许读取,不允许修改,比如:有的网站用户名,一旦注册了,就不允许修改 当然,有时候,我们从别的地方引用数据过来,用作信息的展示,但是却不允许修改,不希望影响源数据 那么readonly与shallowReadonly这两个API就很有用了的 readonly 让一个响应式数据变为只读的,接收一个响应式数据,经过readonly加工处理一下,那么新赋值

  • vueJs函数toRaw markRaw使用对比详解

    目录 前言 toRaw()函数 markRaw()函数 总结 前言 针对一些特殊的需求,在项目里,需要将响应式数据变为普通原始类型数据,这种情况是有的 在Vue里,能够将普通数据类型的数据变为响应式数据,同时,也能将响应式类型数据变为普通类型数据 可以用于提升数据的性能 toRaw()函数 接收一个reactive响应式数据,将一个响应式的数据变为普通类型的数据,转化为非响应式数据,相当于还原对象,reactive相当于制作,但对于ref响应式数据不起作用 将一个由reactive生成的响应式对

  • Vue3中的极致防抖/节流详解(附常见方式防抖/节流)

    目录 前言 防抖或节流原理 防抖(debounce) 示例代码 使用 节流(throttle ) 示例代码 使用 环境说明 新封装 防抖(debounce) 常见封装-1 常见封装-2 新封装 使用 节流(throttle) 常见封装-1 常见封装-2 新封装 总结 前言 今天给大家带来的是Vue 3 中的极致防抖/节流(含常见方式防抖/节流)这篇文章,文章中不仅会讲述原来使用的防抖或节流方式,还会带来新的一种封装方式,使用起来更简单.更清晰. 在前端的开发过程中,在涉及到与用户交互的过程中是基

  • jquery在vue脚手架中的使用方式示例

    本文介绍了jquery在vue脚手架中的使用方式示例,分享给大家,具体如下: 1:在各个vue文件中使用 <script> import '../assets/js/jquery-1.10.2.min.js' export default { data() { return { }, watch: { }, created: function() { }, methods: { list() { this.$router.push({ path: 'list' }); }, }, } $(do

  • Vue+TypeScript中处理computed方式

    目录 什么是 「computed」 「computed」 的用途 在TypeScript怎么用 另一种方案 vue computed正确使用方式 computed or methods computed or watch 什么是 「computed」 「computed」 是Vue中提供的一个计算属性.它被混入到Vue实例中,所有的getter和setter的this上下文自动的绑定为Vue实例.计算属性的结果会被缓存,除非依赖的响应式property变化才会从新计算. 「computed」 的

  • vue项目中引入js-base64方式

    目录 vue引入js-base64 1.安装md5依赖 2.在需要使用md5的组件中使用直接使用md5 使用Base64编码解码 1.下载包 2.在你需要解码(编码)的文件中引用 3.使用方法 vue引入js-base64 1.安装md5依赖 npm install --save js-base64 或者 cnpm install --save js-base64 2.在需要使用md5的组件中使用直接使用md5 let Base64 = require('js-base64').Base64;

  • Vue组件中使用防抖和节流实例分析

    在监听频繁触发的事件时,一定要多加小心,比如 用户在输入框打字.窗口大小调整.滚动.Intersection Observer 事件. 这些事件总是被频繁触发,可能 几秒一次.如果针对每次事件都发起 fetch 请求(或类似的行为),那显然是不明智的. 我们需要做的就是减缓事件处理程序的执行速度.这种缓冲技术就是 防抖(debounce) 和 节流(throttle) . 1. 观察者 防抖 我们先从一个简单的组件开始,我们的任务是 将用户输入到 文本框中的文本 输出到控制台: <templat

  • Vue中函数防抖节流的理解及应用实现

    防抖和节流的目的都是为了减少不必要的计算,不浪费资源,只在适合的时候再进行触发计算. 一.函数防抖 定义 在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时:典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时. 实现原理 函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行. 使用场景 文本框输入搜索(连续输入时避免多次请求接口) 代码实现 /** * 函数防抖

  • Vue浅析axios二次封装与节流及防抖的实现

    目录 什么是axios axios请求图例 axios的二次封装 为什么要进行二次封装 防抖与节流 什么是axios Axios,是一个基于 promise 的网络请求库,作用于node.js和浏览器中,它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中). 使用方式如下: <script> //调用axios方法得到的返回值是 promise 对象 axios({ //请求方式 method: 'get', // 请求地址 url: 'http://www.liu

  • 关于vue项目中搜索节流的实现代码

    我们经常会遇到这种需求,现在我们在使用百度搜索的时候他们的思想也是 根据防抖节流而实现的,至于用防抖还是节流根据自己需求. <template> <input type="text" v-model.trim="sse"> </template> <script> const delay = (function () { let timer = 0 return function (callback, ms) { cl

  • Vue.js中的图片引用路径的方式

    当我们在Vue.js项目中引用图片时,关于图片路径有以下几种情形: 使用一 我们在data里面定义好图片路径 imgUrl:'../assets/logo.png' 然后,在template模板里面 /*错误写法*/ <img src="{{imgUrl}}"> 这样是错误的写法,我们应该用v-bind绑定图片的srcs属性 <img :src="imgUrl"> 或者 <img src="../assets/logo.png

  • 详解vue文件中使用echarts.js的两种方式

    最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单demo,实现过程如下:用了两种实现方式 准备工作 1.安装echarts依赖 控制台输入:npm install echarts --save 2.全局引入 main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts

随机推荐