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

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

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

 

1

<br><template><br>  <div class="hello"><br>    <input :value="text" @input="debUpdata" /><br>    <p>{{ text }}</p><br>  </div><br></template><br> <br><script><br><script setup><br>  import{ref} from 'vue';<br>  const text =ref('');<br>  const debUpdata=(e)=> {<br>  this.text = e.target.value;<br>}<br></script>

​

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

 

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

 

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