当前位置：首页 > VUE

vue中节流的实现

2026-02-23 10:13:46VUE

vue中节流的实现

节流（throttle）是一种限制函数执行频率的技术，确保在指定时间间隔内函数只执行一次。在Vue中可以通过以下几种方式实现节流：

使用lodash的throttle方法

安装lodash库后，可以直接使用其提供的throttle方法：

vue中节流的实现

import { throttle } from 'lodash';

export default {
  methods: {
    handleScroll: throttle(function() {
      console.log('Scroll event throttled');
    }, 300)
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}

自定义节流函数

可以手动实现一个简单的节流函数：

vue中节流的实现

export default {
  methods: {
    throttle(func, delay) {
      let lastCall = 0;
      return function(...args) {
        const now = new Date().getTime();
        if (now - lastCall < delay) return;
        lastCall = now;
        return func.apply(this, args);
      };
    },
    handleClick() {
      this.throttledMethod();
    },
    throttledMethod: function() {
      console.log('Method throttled');
    }
  },
  created() {
    this.throttledMethod = this.throttle(this.throttledMethod, 1000);
  }
}

使用vue-directive实现节流

可以创建一个自定义指令来实现节流：

Vue.directive('throttle', {
  inserted(el, binding) {
    let lastExecTime = 0;
    const delay = binding.arg || 200;
    const handler = binding.value;

    el.addEventListener('click', () => {
      const now = Date.now();
      if (now - lastExecTime < delay) return;
      lastExecTime = now;
      handler();
    });
  }
});

// 使用方式
<button v-throttle:500="handleClick">Click me</button>

使用vue-use的useThrottleFn

如果项目中使用vue-use库，可以直接使用其提供的节流函数：

import { useThrottleFn } from '@vueuse/core';

export default {
  setup() {
    const throttledFn = useThrottleFn(() => {
      console.log('Throttled function');
    }, 1000);

    return {
      throttledFn
    };
  }
}

每种方法各有优缺点，lodash方法功能完善但会增加包体积，自定义方法更轻量但功能简单，根据项目需求选择最适合的实现方式。

标签: vue