直播开发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实现输入框防抖，更多内容欢迎关注之后的文章