VueUse Debounce是什么？

terry 6小时前阅读数 6 #Vue

文章标签 Debounce

在前端开发中,我们常常会遇到一些需要控制函数触发频率的场景，用户在输入框中不断输入内容时触发搜索请求，如果不加以控制，短时间内会发送大量请求，浪费资源且影响性能，这时，VueUse Debounce就派上用场了，VueUse Debounce是VueUse库中的一个工具函数，它可以对函数进行防抖处理，防抖的意思是，当事件被频繁触发时，只在最后一次触发经过一定时间间隔后才执行函数。

VueUse Debounce怎么用？

你需要安装VueUse库,可以通过npm或者yarn来安装，npm install @vueuse/core`，安装完成后，在你的Vue项目中引入`debounce`函数。

使用起来也很简单,假设你有一个按钮点击事件，你希望点击后等待一段时间再执行某个操作，示例代码如下：

```javascript import { debounce } from '@vueuse/core';

export default { setup() { const handleClick = () => { console.log('按钮点击了'); }; const debouncedClick = debounce(handleClick, 1000); // 1000毫秒的防抖时间 return { debouncedClick }; } };

```html
<template>
  <button @click="debouncedClick">点击我</button>
</template>

在上面的代码中,当用户快速点击按钮时，只有最后一次点击在1秒后才会执行`handleClick`函数。

VueUse Debounce有哪些参数？

VueUse Debounce主要有两个参数，第一个参数是要进行防抖处理的函数，也就是我们上面示例中的`handleClick`，第二个参数是防抖的时间间隔，单位是毫秒，比如示例中的`1000`，除了这两个基本参数外，它还有一些可选参数。

leading参数

leading参数默认为`false`,如果设置为`true`，那么在第一次触发事件时就会立即执行函数，然后在接下来的防抖时间内，如果再次触发事件，就重新开始计时。

```javascript const debouncedClick = debounce(handleClick, 1000, { leading: true }); ```

这样,当用户点击按钮时，会立即执行一次`handleClick`，然后如果在1秒内再次点击，就重新开始1秒的计时，1秒后如果没有再次点击才会再次执行。

trailing参数

trailing参数默认为`true`,它表示在防抖时间结束后是否执行函数，如果设置为`false`，那么只有在leading为`true`时第一次触发会执行函数，之后即使防抖时间结束也不会执行。

```javascript const debouncedClick = debounce(handleClick, 1000, { trailing: false }); ```

这种情况下,如果用户一直快速点击按钮（在1秒内），只有第一次点击会执行`handleClick`函数。

VueUse Debounce在实际项目中的应用场景有哪些？

除了前面提到的输入框搜索场景,VueUse Debounce还有很多其他应用场景。

窗口resize事件

当窗口大小改变（resize事件）时，我们可能需要根据新的窗口大小做一些布局调整或者重新获取数据等操作，如果不进行防抖处理，resize事件会被频繁触发，导致性能问题，使用VueUse Debounce可以这样做：

```javascript import { debounce } from '@vueuse/core';

export default { mounted() { const handleResize = () => { console.log('窗口大小改变了'); // 这里写布局调整等代码 }; const debouncedResize = debounce(handleResize, 300); window.addEventListener('resize', debouncedResize); }, beforeUnmount() { window.removeEventListener('resize', debouncedResize); } };

<p>这样，只有当用户停止调整窗口大小300毫秒后才会执行`handleResize`函数。</p>
<h2>表单验证</h2>
<p>在表单输入时，比如用户输入用户名，我们可能需要实时验证用户名是否可用，如果不防抖，每次输入一个字符就发送请求验证，会增加服务器压力，使用VueUse Debounce可以优化：</p>
```javascript
import { debounce } from '@vueuse/core';
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    checkUsername() {
      console.log('验证用户名：', this.username);
      // 这里写发送请求验证用户名的代码
    }
  },
  mounted() {
    this.debouncedCheck = debounce(this.checkUsername, 500);
  },
  watch: {
    username(newValue) {
      this.debouncedCheck();
    }
  }
};

当用户输入用户名时,只有停止输入500毫秒后才会执行`checkUsername`函数进行验证。

VueUse Debounce和其他防抖实现方式相比有什么优势？

在Vue项目中,我们也可以自己实现简单的防抖函数。

```javascript function myDebounce(func, delay) { let timer; return function() { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(() => { func.apply(context, args); }, delay); }; } ```

但是VueUse Debounce有一些优势，它是VueUse库的一部分，和Vue项目的集成更加友好，遵循Vue的开发规范，它提供了更多的配置参数（如leading和trailing），可以更灵活地满足不同的需求，VueUse库是经过广泛测试和优化的，在性能和稳定性上有一定保障，使用VueUse Debounce可以让代码更加简洁和易读，符合现代前端开发中使用工具库来提高开发效率的趋势。

VueUse Debounce是Vue项目中处理函数防抖的一个非常实用的工具，通过合理设置参数，它可以在多种场景下优化我们的代码性能，减少不必要的函数执行，无论是输入框搜索、窗口resize还是表单验证等场景，都能发挥它的作用，和自己实现的简单防抖函数相比，它具有更好的集成性、灵活性和稳定性，在实际开发中，我们可以根据具体需求选择合适的防抖方式，而VueUse Debounce无疑是一个值得考虑的选择。