vue3 使用防抖节流

在 Vue3 中，可以使用 `lodash` 库中的 `debounce` 和 `throttle` 函数来实现防抖和节流。

防抖是指在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又被触发，则重新计时。例如，防止用户频繁点击按钮导致多次提交表单。在 Vue3 中，可以使用 `lodash` 库中的 `debounce` 函数来实现防抖。示例代码如下：

import { debounce } from 'lodash';

export default {
  data() {
    return {
      inputValue: '',
    }
  },
  methods: {
    handleInput: debounce(function(event) {
      console.log(event.target.value);
    }, 500),
  },
};

上述代码中，`handleInput` 方法会在用户输入停止 500ms 后执行。

节流是指在一定时间间隔内只执行一次回调函数，例如，滚动条滚动时不断触发回调函数，但是我们只需要在一定时间间隔内执行一次回调函数。在 Vue3 中，可以使用 `lodash` 库中的 `throttle` 函数来实现节流。示例代码如下：

import { throttle } from 'lodash';

export default {
  data() {
    return {
      scrollTop: 0,
    }
  },
  mounted() {
    window.addEventListener('scroll', throttle(this.handleScroll, 500));
  },
  methods: {
    handleScroll() {
      this.scrollTop = window.pageYOffset;
    },
  },
};

上述代码中，`handleScroll` 方法会在滚动条滚动时每 500ms 执行一次。