Vue 组件：函数防抖的优雅实现，告别重复执行困扰！

2023-12-15 05:50:06

在繁忙的 Web 开发世界中，我们经常会遇到需要处理快速且频繁的事件的情况。这种情况下，采用函数防抖技术至关重要，它可以防止函数在短时间内被重复调用，从而优化性能和用户体验。

然而，在 Vue 组件中实现函数防抖并非易事。传统的解决方案通常涉及自定义指令或使用第三方库，这可能会增加代码复杂性和维护成本。为了解决这一问题，本文将提供一种优雅且通用的方法，将函数防抖封装为一个 Vue 组件。

函数防抖的奥秘

函数防抖是一种技术，它会在指定的时间间隔内只执行一次给定的函数。如果在该时间间隔内再次触发函数，则它将被忽略。这种机制对于防止因快速重复触发事件而导致的性能问题非常有用，例如滚动、调整窗口大小或用户输入。

使用 Vue 组件封装函数防抖

我们可以利用 Vue 组件的抽象能力将函数防抖封装成一个可重用的组件。下面是一个示例组件：

<script>
import { ref, onBeforeMount, onBeforeUnmount } from 'vue';

export default {
  abstract: true,
  props: {
    debounce: {
      type: Number,
      default: 300,
    },
  },
  setup(props, { slots }) {
    const timeoutId = ref(null);
    
    onBeforeMount(() => {
      window.addEventListener('resize', debounceWrapper);
    });
    
    onBeforeUnmount(() => {
      window.removeEventListener('resize', debounceWrapper);
      clearTimeout(timeoutId.value);
    });
    
    const debounceWrapper = () => {
      if (timeoutId.value) clearTimeout(timeoutId.value);
      timeoutId.value = setTimeout(() => {
        slots.default();
      }, props.debounce);
    };
  },
};
</script>

这个组件可以接受一个 debounce prop，它指定防抖时间（以毫秒为单位）。它内部使用 Vue 的 onBeforeMount 和 onBeforeUnmount 生命周期钩子来监听事件并设置/清除超时。当事件被触发时，debounceWrapper 函数被调用。它将清除任何先前的超时，并设置一个新的超时，该超时在指定的防抖时间后调用原始函数。

使用组件

使用这个组件非常简单：

<template>
  <debounce @resize="onResize">
    <!-- 这里的内容将在调整窗口大小时执行 -->
  </debounce>
</template>

<script>
export default {
  methods: {
    onResize() {
      // 处理窗口调整大小事件
    },
  },
};
</script>