Vue3 中使用lodash对事件进行防抖和节流操作

Vue3中可以借助第三方库Lodash（lodash是一个功能强大的JavaScript实用工具库）来对事件进行防抖（debounce）和节流（throttle）处理，这两个技巧用于优化性能，避免频繁执行某个耗时的操作。

**防抖（Debounce）**: 当连续触发某个事件一定时间间隔内不再触发，那么只有在最后一次触发后才会执行相应的回调函数。这有助于防止短时间内连续多次触发导致不必要的计算或网络请求。

例如，在Vue组件中，你可以这样做：

import { debounce } from 'lodash';

export default {
  methods: {
    handleInputDebounced(value) {
      debounce(() => this.doSomethingExpensive(value), 300); // 300毫秒后执行doSomethingExpensive
    },
  },
};

这里`handleInputDebounced`会在用户停止输入300毫秒后再执行`doSomethingExpensive`方法。

**节流（Throttle）**: 类似于防抖，但它保证在指定时间内只会执行一次回调，不论触发了多少次。如果在此期间再次触发，则会取消上一次正在执行的任务，并在新的触发间隔开始时执行回调。

使用节流的例子类似：

import { throttle } from 'lodash';

export default {
  methods: {
    handleScrollThrottled() {
      throttle(() => this.updateContent(), 500); // 每隔500毫秒执行updateContent
    },
  },
};

这里，滚动事件每隔500毫秒最多只会执行一次`updateContent`方法。