当前位置：首页 > VUE

vue项目实现防抖

2026-02-22 17:40:01VUE

防抖的基本概念

防抖（Debounce）是一种优化高频触发事件的技术，通过延迟执行函数调用，避免短时间内重复触发。在Vue项目中，常用于输入框搜索、窗口大小调整等场景。

使用Lodash库实现防抖

Lodash是一个流行的JavaScript工具库，提供了_.debounce方法，可直接用于Vue项目。

安装Lodash：

npm install lodash

在Vue组件中使用：

import { debounce } from 'lodash';

export default {
  methods: {
    handleInput: debounce(function(event) {
      // 处理输入逻辑
      console.log(event.target.value);
    }, 500)
  }
}

自定义防抖函数

如果不希望引入外部库，可以手动实现防抖功能。

export default {
  methods: {
    debounce(func, wait) {
      let timeout;
      return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(this, args);
        }, wait);
      };
    },
    handleInput(event) {
      const debouncedFn = this.debounce(() => {
        console.log(event.target.value);
      }, 500);
      debouncedFn();
    }
  }
}

在Vue指令中使用防抖

可以通过自定义指令实现防抖功能，适用于按钮点击等场景。

Vue.directive('debounce', {
  inserted(el, binding) {
    let delay = binding.arg || 500;
    let timer;
    el.addEventListener('click', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value();
      }, delay);
    });
  }
});

使用方式：

<button v-debounce:300="handleClick">点击</button>

在Vue 3的Composition API中使用防抖

Vue 3的setup语法中可以使用ref和watchEffect结合实现防抖。

vue项目实现防抖

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const searchQuery = ref('');
    let timeout;

    watchEffect(() => {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        console.log(searchQuery.value);
      }, 500);
    });

    return { searchQuery };
  }
}