大家好，我是前端宝哥。
我第一次看到防抖这个概念的时候，就觉得它很厉害，然后就开始尝试用它来解决一些问题。比如之前做项目时，有个搜索框，每按一下键盘就会立刻发送请求，这会导致用户体验很差，而且给服务器造成很大压力，毕竟每次请求都是要花时间的嘛！
后来跟朋友聊起这个事，就想着怎么实现防抖。其实防抖很简单，就是延迟一下执行，避免频繁地触发操作。
防抖是什么？
说白了，就是给按钮、开关或者其他用户输入加一个“冷静期”，避免它们太“激动”了，乱发请求。
比如，在搜索框中，如果用户输入速度很快，防抖可以确保只有在用户停止输入一段时间后，才会发送搜索请求，这样就不会频繁地请求数据了。
Vue 中的防抖怎么做？
在 Vue 中实现防抖有多种方法，最简单的方法是用纯 JavaScript，直接用 setTimeout 来延迟执行。
export function debounce(fn, wait){
let timer;
return function(...args){
if(timer) {
clearTimeout(timer); // 清除之前的定时器
}
const context = this; // 获取当前上下文
timer = setTimeout(()=>{
fn.apply(context, args); // 时间到了就执行函数
}, wait);
}
}
不过，如果需要访问 Vue 中的反应式属性，比如 ref 或者 computed，就需要更 Vue 一点的方案。这时，就可以使用 VueUse 的 useDebounceFn 可组合函数：
import { useDebounceFn } from '@vueuse/core'
const debouncedFn = useDebounceFn(() => {
// 执行你的操作
}, 1000)
window.addEventListener('resize', debouncedFn)
关于 useDebounceFn 的更多信息，可以去 这里 查看。
总结
OK，关于防抖的概念以及如何在 Vue 中使用它，你就学会了！
下次再见！
祝你编程愉快！🖥️
