lodash 防抖节流 vue

### 如何在 Vue.js 中使用 Lodash 实现防抖和节流

#### 安装依赖包
为了能够在项目中使用 `lodash` 的防抖（debounce）和节流（throttle），首先需要通过 npm 或 yarn 来安装该库。

npm install lodash --save

或者如果更倾向于使用 yarn：

yarn add lodash

#### 导入并配置 Lodash 函数

##### 方法一：按需加载特定方法
可以只导入所需的 debounce 和 throttle 方法来减少打包体积，而不是整个 Lodash 库。这种方式适用于优化生产环境下的性能[^3]。

import { debounce, throttle } from 'lodash';

##### 方法二：全局引入 Lodash
对于小型应用或不介意额外开销的情况，可以选择直接全部引入 Lodash[^1]。

import _ from 'lodash';

#### 组件内部定义防抖与节流处理逻辑

当希望某个操作不会因为用户的快速连续点击或其他高频次交互而被多次执行时，就可以考虑采用这两种策略之一。

###### 防抖实例展示
下面是一个简单的例子，在按钮点击事件上添加了一个经过防抖处理的方法，确保即使用户疯狂点击也不会立即响应每一个请求，而是等待一段时间后再统一处理一次最新的输入[^2]。

<template>
  <button @click="handleClick">Submit</button>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    this.handleClick = _.debounce(this.submitForm, 2000);
  },
  methods: {
    submitForm() {
      console.log('提交表单');
    }
  }
};
</script>

上述代码片段展示了如何利用 `created()` 生命周期钩子绑定一个已经过防抖封装后的回调给原生 DOM 事件监听器。这里设置的时间间隔为两秒(`2000ms`)，意味着只有当最后一次触发发生在超过这两秒钟之后才会真正调用实际的目标函数——即打印日志消息到控制台。

###### 节流的应用场景举例
假设有一个滚动条位置变化监控的需求，为了避免因浏览器窗口尺寸调整期间产生的大量 scroll 事件造成不必要的计算资源浪费，可以通过如下方式限制其频率至每五秒最多触发一次[^4]。

<template>
  <div id="app">
    <!-- ... -->
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener(
      'scroll',
      _.throttle(() => {
        const scrollTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        console.log(`当前滚动距离顶部的距离:${scrollTop}px`);
      }, 5000)
    );
  },
  beforeDestroy() {
    // 清除事件监听以防内存泄漏
    window.removeEventListener('scroll', null);
  }
};
</script>

在这个案例里，每当页面发生滚动行为时都会触发展示当前位置距顶端偏移量的日志记录动作；不过由于采用了节流机制的缘故，即便短时间内发生了多轮滚动活动也只会选取其中某几次作为有效样本加以报告而已。