vue3使用lodash节流防抖

### 实现 Lodash 的节流和防抖功能

为了在 Vue 3 中实现 Lodash 提供的 `throttle` 和 `debounce` 功能，可以按照如下方式操作：

#### 安装依赖库
首先需要安装 Lodash 库。可以通过 npm 或 yarn 来完成这一步骤。

npm install lodash

或者使用 yarn:

yarn add lodash

#### 导入并配置组件内使用

接下来，在 Vue 组件内部导入所需的函数，并将其应用于事件处理程序上。下面是一个简单的例子展示如何做到这一点[^1]:

<template>
  <div>
    <!-- 使用 v-on 指令绑定带有修饰符的方法 -->
    <input @keyup="handleKeyUp">
    <button @click="handleClick">点击</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import _ from 'lodash'

// 创建响应式的计数器变量
const counter = ref(0)

// 节流版本的增加计数器逻辑
const throttledIncrementCounter = _.throttle(() => {
  counter.value++
}, 2000) // 设置等待时间为两秒

// 防抖版本的重置计数器逻辑
const debouncedResetCounter = _.debounce(() => {
  counter.value = 0
}, 1500) // 设置延迟时间一秒半

function handleKeyUp() {
  console.log('键被按下')
  throttledIncrementCounter()
}

function handleClick() {
  console.log('按钮被单击')
  debouncedResetCounter()
}
</script>

在这个示例中，每当输入框中的按键被释放(`@keyup`)时会触发一次 `handleKeyUp()` 方法调用；而当按钮 (`<button>`) 被单击(`@click`) 则执行 `handleClick()` 函数。通过这种方式实现了对频繁发生的键盘交互进行限流控制以及对于短时间内多次快速点击行为做出适当反应的效果。