Vue3 防抖函数

什么是防抖函数？

在介绍 Vue3 中的防抖函数之前，我们先来了解一下什么是防抖函数。防抖（Debounce）是一种常见的前端优化技术，用于控制某个函数在一段时间内只执行一次，以避免频繁触发引起的性能问题。

当用户进行一些频繁的操作时，例如连续点击按钮、输入框输入内容等，如果每次操作都触发函数执行，可能会导致性能问题，防抖函数可以帮助我们在一定的时间内只执行一次函数，减少函数的执行次数。

防抖函数的实现原理

防抖函数的实现原理相对简单，主要思想是在函数被连续触发时，设置一个定时器，每次触发函数时清除上一次的定时器，并重新设置一个新的定时器。在指定的时间间隔内没有再次触发函数时，才会真正执行该函数。这样就实现了在一定时间内只执行一次函数的效果。

下面是一个简单的防抖函数的实现示例：

function debounce(fn, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(fn, delay);
  };
}

在上面的示例中，我们定义了一个名为 debounce 的防抖函数，它接受两个参数：fn 是需要执行的函数，delay 是防抖的时间间隔。

Vue3 中的防抖函数

在 Vue3 中，可以使用 Composition API 自定义一个防抖函数，以便在组件中使用。在 Vue3 中，Composition API 提供了 onMounted 和 onUnmounted 这两个钩子函数，可以用于在组件挂载和卸载时执行相应的逻辑。

下面是一个在 Vue3 中自定义防抖函数的示例：

import { onMounted, onUnmounted, ref } from 'vue';

function useDebounce(fn, delay) {
  const timer = ref(null);

  function debouncedFn() {
    clearTimeout(timer.value);
    timer.value = setTimeout(fn, delay);
  }

  onMounted(() => {
    document.addEventListener('click', debouncedFn);
  });

  onUnmounted(() => {
    document.removeEventListener('click', debouncedFn);
  });

  return timer;
}

在上面的示例中，我们使用了 Vue3 的 ref 函数来定义了一个名为 timer 的响应式引用。然后我们定义了一个名为 debouncedFn 的函数，用于执行防抖的逻辑。在函数内部，我们使用 clearTimeout 清除之前设置的定时器，然后设置一个新的定时器。

在 onMounted 钩子函数中，我们监听了 click 事件，并调用了 debouncedFn 函数。在 onUnmounted 钩子函数中，我们移除了对 click 事件的监听。

最后，我们通过 return 语句返回了 timer，以便在组件中可以获得定时器的状态。

如何在组件中使用防抖函数

在自定义了防抖函数之后，我们可以在组件中使用它来达到防抖的效果。下面是一个在 Vue3 组件中使用防抖函数的示例：

<template>
  <div>
    <button @click="handleClick">点击按钮</button>
  </div>
</template>

<script>
import { useDebounce } from '@/utils';

export default {
  setup() {
    const handleClick = () => {
      console.log('点击了按钮！');
    };

    const timer = useDebounce(handleClick, 300);

    return {
      timer,
    };
  },
};
</script>

在上面的示例中，我们首先引入了之前自定义的防抖函数 useDebounce。然后在 setup 钩子函数中，我们定义了一个名为 handleClick 的函数，用于处理按钮的点击事件。在 setup 函数内部，我们调用了 useDebounce 函数，并将 handleClick 和防抖的时间间隔 300 作为参数传入。

最后，我们通过 return 语句将定时器的状态 timer 返回，以便在模板中可以使用。