直播开发app，vue防抖 自定义ref实现输入框防抖

直播开发app，vue防抖 自定义ref实现输入框防抖

  首先需要把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);
    }

 以上就是 直播开发app，vue防抖 自定义ref实现输入框防抖，更多内容欢迎关注之后的文章