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

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

防抖(如果设定的时间到来之前,又一次触发了事件,就重新开始计时。

  接下来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到底是个什么东西呢
image.png


打印出来是一个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的方法
image.png

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

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对比

image.png

全部代码
```js

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);
}
}
})
}


>使用方法

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

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

前后对比感受一下!!
image.png

目录
相关文章
|
13天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
117 64
|
20天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
35 1
vue学习第四章
|
20天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
28 1
vue学习第九章(v-model)
|
20天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
33 1
vue学习第十章(组件开发)
|
26天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
13天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
24 8
|
13天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
26天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
26天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
25天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
39 3