vue防抖自定义ref实现输入框防抖

防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始计时。

接下来我将带大家一步步分析如何把input防抖做到极致，

首先需要把input 的双向绑定v-mode 拆开为一个value 和一个input事件，在事件里注册一个函数 debUpdata，debUpdata里获取到input输入内容再赋值给text，这就类似于手写v-mode，代码如下：

<template>
  <div class="hello">
    <input :value="text" @input="debUpdata" />
    <p>{
   
   { text }}</p>
  </div>
</template>

<script>
<script setup>
  import{ref} from 'vue';
  const text =ref('');
  const debUpdata=(e)=> {
  this.text = e.target.value;
}
</script>

具体防抖操作，就可以在debUpdata函数里进行操作，所谓防抖，无非就是让数据的变化延迟执行，所以在debUpdata内定义一个timer，每一次执行函数的时候先清空timer，然后在使用setTimeout 定时一秒之后，改变text的值，就实现了最基础的防抖。代码如下：

 debUpdata(e) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.text = e.target.value;
      }, 1000);
    }

如果每次都需要写上这个函数去进行input防抖的话，多少有点麻烦，那具体怎么优化，抽离成单独的防抖函数呢？

新建debounce.js文件封装一个函数debounce

export function debounce(func, delay = 1000) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            func.call(this, ...args);
        }, delay);
    }
}

封装完每次使用的时候调用：

<template>
  <div class="app">
    <input :value="text" @input="debUpdata" />
    <p>{
   
   { text }}</p>
  </div>
</template>

<script setup>
import { debounce } from "./debounce";
import{ref} from 'vue';
const text=ref('');
const update=(e)=>(text.value=e.target.value);
const debUpdata=debounce(update,1000);
</script>

虽然效果实现了，但是每次使用都需要先引用，再使用debUpdata去调用一个真正的更新函数，如果所有输入框都需要加上防抖的话，就有点麻烦了，接下来咱们继续优化以上代码！！

关于vue的ref到底是个什么东西呢

打印出来是一个RefImpl对象，对象里面有一个value，是通过Object.defineProperty来定义的，通过Object.defineProperty定义之后会产生一个get和set函数具体可以参考一下Object.defineProperty官方文档也就是说 vue 提供的ref方法源码里就包含着get以及set,在加上vue是响应式的，响应式的基本原理就是在get的时候进行依赖收集得知是谁用的了当前数据，而set则是派发更新，通俗讲就是通知之前使用的地方进行响应的更新。所以不妨可以大胆猜测一下，ref函数结构应该类似:

function ref(value) {
    {
        get(){
            // 依赖收集 track()
            return value;
        },
        set(val){
            //派发更新 trigger()
            value = val;
        }
    }
}

如果要实现数据延迟更新，直接延迟数据更新，也就是相当于延迟ref里set派发更新不就可以了！那实现防抖难道还需要手动重写vue源码吗？那当然不是，vue为我们提供了一个自定义ref的入口，叫做customRef ，可以自定义get和set的方法

利用customRef声明函数debounceRef来自定义get和set

import {customRef} from 'vue'
export function debounceRef(value,delay=1000){
    // return ref(value) //原始get set
    return customRef(()=>{
        return {
            get(){
                // 依赖收集 track()
                return value;
            },
            set(val){
                //派发更新 trigger()
                value = val;
            }
        }
    })
}

首先 get 除了要返回值以外，还需要进行依赖收集关于依赖收集 vue考虑到这一点了，他给我们传入了一个参数叫做track，track是一个方法，只要一调用这个方法就会自动进行依赖收集，而同事也传入了一个参数叫trigger，只要调用trigger方法，就会触发派发更新；

ref 与自定义ref对比

全部代码

import { customRef } from 'vue'
export function debounceRef(value, delay = 1000) {
    let timer;
    // return ref(value) //原始get set
    return customRef((track, trigger) => {
        return {
            get() {
                // 依赖收集 track()
                track();
                return value;
            },
            set(val) {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    //派发更新 trigger()
                    value = val;
                    trigger()
                }, delay);
            }
        }
    })
}

使用方法

<template>
  <div class="app">
    <input v-model="text" />
    <p>{
   
   { text }}</p>
  </div>
</template>

<script setup>
import { debounceRef } from "./ref";
const text=debounceRef('');
</script>

前后对比感受一下！！

欢迎大家留言沟通交流

vue防抖 自定义ref实现输入框防抖

猜你喜欢

vue防抖自定义ref实现输入框防抖