vue3如何实现防抖？

第一 防抖就是我们设置一个调用时间，点击后设置时间开始倒计时，如果再次点击会重新倒计时
  npm或yarn安装：
 

npm install lodash

<template>
  <div @click="debouncedInputHandler">
    <button>打印</button>
    <!-- 输入框，例如：<input type="text" v-model="inputValue" /> -->
    <!-- 注意：这里的 v-model 和 input 事件是为了示例，实际使用时请根据需求调整 -->
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import _ from 'lodash';

// 定义一个响应式变量来存储输入框的值（实际使用时需要添加输入框和 v-model 绑定）
const inputValue = ref('');

// 定义原始的输入处理函数
const inputHandler = () => {
  console.log("新增成功");
  
  // 在这里处理输入事件
};

// 使用 lodash 的 debounce 函数创建防抖函数
let debouncedInputHandler;

onMounted(() => {
  debouncedInputHandler = _.debounce(inputHandler, 1000); // 每 300 毫秒最多调用一次
});

// 监听输入事件，并调用防抖后的处理函数
// 注意：这里的监听应该是通过 v-model 绑定的 input 事件，或者你可以手动添加一个 input 事件监听器到模板中的输入框上
// 由于 <script setup> 不支持直接访问 DOM，因此通常你会使用 v-model 或通过 ref 引用 DOM 元素并手动添加事件监听器
// 但为了简化示例，这里假设你已经有了某种方式来触发这个防抖函数
// 在实际代码中，你应该将下面的代码替换为对输入框的 @input 事件的监听，例如：<input @input="debouncedInputHandler" v-model="inputValue" />
// 由于模板部分已经假设了 @input 绑定，这里我们不再重复添加事件监听器代码。

// 在组件卸载前取消防抖函数
onBeforeUnmount(() => {
  if (debouncedInputHandler.cancel) {
    debouncedInputHandler.cancel();
  }
});
</script>

<!-- 注意：这里的模板部分需要根据你的实际输入框进行调整 -->
<!-- 例如： -->
<!-- <template> -->
<!--   <input type="text" v-model="inputValue" @input="debouncedInputHandler" /> -->
<!-- </template> -->