vue中的防抖和节流

在Vue.js中，防抖(Debounce)和节流(Throttle)是常用的性能优化技术，用于控制函数的执行频率，以避免在短时间内连续触发某个操作导致资源过度消耗。

1. **防抖(Debounce)**：当用户在一个事件上频繁触发，比如输入框输入字符或滚动条滚动，我们希望在用户停止活动一段时间后再执行相应的处理。防抖就是记录最后一次触发的时间，如果在这段时间内再次触发，则重置计时器并继续等待，直到用户停止操作超过设定的时间才执行回调函数。

2. **节流(Throttle)**：与防抖类似，但在用户触发频率过高的时候，并不是等到用户停止再执行一次，而是在一定时间内只执行一次回调。一旦开始执行，只要满足间隔时间，就会立即结束当前的计时器，然后重新开始一个新的计时器。

在Vue中，可以使用原生的setTimeout和clearTimeout，或者第三方库如lodash.debounce和lodash.throttle来实现这两个功能。例如：

import throttle from 'lodash/throttle';

export default {
  methods: {
    handleScroll(debounceFn) {
      debounceFn(() => {
        console.log('处理滚动');
      }, 500); // 每隔500毫秒执行一次
    }
  },
  mounted() {
    this.handleScroll(throttle(this.scrollHandler, 300)); // 设置300毫秒的节流
  }
}