Vue3 中的防抖|极客教程

Vue3 中的防抖

在前端开发中，我们经常会遇到需要处理用户输入或是其他频繁触发的操作，而这种操作会在短时间内多次触发的情况。如果我们在每次触发时都立即处理，可能会影响性能或产生不必要的请求。这时就需要使用防抖（Debounce）技术来解决这个问题。

防抖是一种常见的优化手段，它的原理是在一定时间间隔内，如果事件持续触发，就会重新计时。只有当事件停止触发一定时间后，才会执行相应的操作。这样可以避免不必要的重复操作，提升用户体验和系统性能。

在 Vue3 中，我们可以通过简单的代码实现防抖功能。本文将详细介绍如何在 Vue3 中使用防抖，以及一些常见的应用场景和实例。

防抖函数的实现

首先，我们需要实现一个通用的防抖函数，这个函数接受两个参数：要执行的函数和防抖的时间间隔。在 Vue3 中，我们可以使用 setup 函数来封装这个防抖函数。具体代码如下：

import { ref } from 'vue';

const useDebounce = (fn, delay) => {
  let timer = null;

  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }

    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

export default useDebounce;

以上代码定义了一个 useDebounce 函数，它接受两个参数 fn 和 delay，分别表示要执行的函数和防抖的时间间隔。在内部使用了 setTimeout 和 clearTimeout 来实现防抖的效果。

在 Vue3 组件中使用防抖

接下来，让我们看看如何在 Vue3 组件中使用上面定义的防抖函数。假设我们有一个搜索框组件，用户在输入框中输入内容时会触发搜索请求。如果用户输入过快，我们希望在用户停止输入一定时间后再触发搜索请求。这时我们就可以使用防抖来优化搜索请求。

<template>
  <input type="text" v-model="keyword" @input="handleInput" placeholder="请输入关键字"/>
</template>

<script>
import { ref, onMounted } from 'vue';
import useDebounce from './useDebounce';

export default {
  setup() {
    const keyword = ref('');

    const search = () => {
      console.log('正在搜索：', keyword.value);
      // 发起搜索请求
    };

    const debouncedSearch = useDebounce(search, 500); // 设置防抖时间为500毫秒

    const handleInput = () => {
      debouncedSearch();
    };

    return {
      keyword,
      handleInput
    };
  }
};
</script>

在上面的代码中，我们首先定义了一个搜索框组件，用户输入关键字后会触发 handleInput 方法。在 setup 函数中使用 useDebounce 函数创建了一个防抖函数 debouncedSearch，并将其绑定到 handleInput 方法上。这样当用户输入内容时，会在停止输入500毫秒后再执行搜索请求，减少了不必要的请求频率。