vue中的防抖和节流

本文介绍: 防抖（Debounce）是指在事件被触发后，等待一段时间后再执行回调函数。如果在这段等待时间内，事件又被触发，则重新计时。但与防抖不同的是，节流会在固定的时间间隔内执行回调函数，而不是等待一段时间后执行。需要注意的是，防抖和节流都是通过延迟执行回调函数来限制事件触发频率的。方法会在窗口大小改变事件触发后等待300毫秒后执行，如果在这300毫秒内窗口大小又改变，则重新计时。如果在这300毫秒内滚动事件又触发，则忽略本次触发。在Vue中，防抖和节流是两种常用的优化技术，用于限制事件的触发频率，以提高页面性能。

在Vue中，防抖和节流是两种常用的优化技术，用于限制事件的触发频率，以提高页面性能。

防抖（Debounce）是指在事件被触发后，等待一段时间后再执行回调函数。如果在这段等待时间内，事件又被触发，则重新计时。防抖通常用于限制重复触发频率较高的事件，比如窗口大小改变、输入框输入等。这样可以避免事件过于频繁触发导致性能问题。

在Vue中，可以使用Lodash库提供的_.debounce方法实现防抖，或者自己手动编写一个防抖函数。以下是一个使用_.debounce方法实现防抖的例子：

import { debounce } from 'lodash';

export default {
  methods: {
    handleResize: debounce(function() {
      // 处理窗口大小改变事件
    }, 300),
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
};

上述例子中，handleResize方法会在窗口大小改变事件触发后等待300毫秒后执行，如果在这300毫秒内窗口大小又改变，则重新计时。

节流（Throttle）是指在一定时间间隔内只执行一次回调函数。和防抖类似，节流也可以用于限制重复触发频率较高的事件。但与防抖不同的是，节流会在固定的时间间隔内执行回调函数，而不是等待一段时间后执行。

在Vue中，同样可以使用Lodash库提供的_.throttle方法实现节流，或者自己手动编写一个节流函数。以下是一个使用_.throttle方法实现节流的例子：

import { throttle } from 'lodash';

export default {
  methods: {
    handleScroll: throttle(function() {
      // 处理滚动事件
    }, 300),
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
};