当前位置：首页 > VUE

vue实现防抖

2026-01-19 10:59:47VUE

Vue 实现防抖的方法

防抖（Debounce）是一种限制函数频繁调用的技术，确保函数在连续触发时只执行一次。以下是几种在 Vue 中实现防抖的方法。

使用 Lodash 的 `_.debounce`

Lodash 提供了现成的防抖函数，可以直接在 Vue 中使用。

import _ from 'lodash';

export default {
  methods: {
    handleInput: _.debounce(function() {
      // 防抖逻辑
      console.log('Input debounced');
    }, 500)
  }
}

在模板中绑定事件：

<input @input="handleInput" />

自定义防抖函数

如果不依赖 Lodash，可以手动实现防抖功能。

vue实现防抖

export default {
  methods: {
    debounce(func, wait) {
      let timeout;
      return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          func.apply(context, args);
        }, wait);
      };
    },
    handleInput() {
      this.debounce(() => {
        console.log('Input debounced');
      }, 500)();
    }
  }
}

使用 Vue 3 的 `setup` 语法

在 Vue 3 的 Composition API 中，可以更方便地封装防抖逻辑。

import { ref } from 'vue';

export default {
  setup() {
    const debounce = (func, wait) => {
      let timeout;
      return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          func(...args);
        }, wait);
      };
    };

    const handleInput = debounce(() => {
      console.log('Input debounced');
    }, 500);

    return { handleInput };
  }
}

在 Watcher 中使用防抖

对于 Vue 的 watch，也可以通过防抖优化频繁触发的场景。

export default {
  data() {
    return {
      searchQuery: ''
    };
  },
  watch: {
    searchQuery: {
      handler: _.debounce(function(newVal) {
        console.log('Search query changed:', newVal);
      }, 500),
      immediate: true
    }
  }
}

使用第三方库 `vue-debounce`

vue-debounce 是一个专门为 Vue 设计的防抖库，提供了更简洁的用法。

vue实现防抖

安装：

npm install vue-debounce

使用：

import VueDebounce from 'vue-debounce';
Vue.use(VueDebounce);

export default {
  methods: {
    handleInput() {
      console.log('Input debounced');
    }
  }
}

模板中直接使用指令：

<input v-debounce:500ms="handleInput" />

以上方法可以根据项目需求选择最适合的实现方式。

标签: 防抖 vue

分享给朋友：

vue observer实现

Vue Observer 实现原理 Vue 的响应式系统核心是通过 Object.defineProperty（Vue 2）或 Proxy（Vue 3）实现的 Observer 模式。以下是关键实现细…

vue实现计算

Vue 实现计算的方法在 Vue 中实现计算功能可以通过多种方式完成，主要包括计算属性（computed）、方法（methods）和侦听器（watch）。以下是具体的实现方法：计算属性（Comp…

vue实现接口

在 Vue 中实现接口请求 Vue 本身不直接提供 HTTP 请求功能，通常需要借助第三方库如 axios 或 fetch 来实现接口请求。以下是几种常见方法：使用 axios 发送请求安装 a…

vue 实现fadeout

Vue 实现淡出效果在 Vue 中实现淡出（fade-out）效果可以通过 CSS 过渡或动画结合 Vue 的动态渲染功能完成。以下是几种常见方法：使用 Vue 过渡（Transition）组件…

vue实现日历

Vue 实现日历的基本方法使用 Vue 实现日历可以通过自定义组件或借助第三方库完成。以下是两种常见实现方式：自定义日历组件创建基于 Vue 的日历组件需要处理日期计算和渲染逻辑。核心是生成当…

自实现vue

实现 Vue 的核心功能要实现一个简化版的 Vue，需要理解其核心功能：数据响应式、模板编译、虚拟 DOM 和组件系统。以下是关键步骤的分解：数据响应式 Vue 使用 Object.define…

vue实现防抖