vue3 给按钮设置防抖节流

你可以使用 Vue 3 中的 `v-debounce` 和 `v-throttle` 指令来给按钮设置防抖和节流。

防抖指的是在事件被触发后，等待一定时间后再执行回调函数，如果在这段时间内再次触发事件，则重新计时。这可以防止在短时间内多次触发事件。

节流指的是在事件被触发后，一定时间内只执行一次回调函数，无论事件触发频率有多高，都会按照固定的时间间隔执行。

下面是一个示例，演示如何使用 `v-debounce` 和 `v-throttle`：

<template>
  <div>
    <button v-debounce="handleClick">防抖按钮</button>
    <button v-throttle="handleClick">节流按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 处理点击事件的逻辑
    }
  }
}
</script>

在上面的示例中，当点击“防抖按钮”时，将会等待一定时间（默认是300毫秒），然后再执行 `handleClick` 方法。如果在等待时间内再次点击该按钮，则重新计时。

而点击“节流按钮”时，将会在一定时间间隔（默认是300毫秒）内只执行一次 `handleClick` 方法，无论点击频率有多高。

你可以根据需要调整防抖和节流的时间间隔，具体的用法可以参考相关文档和示例。