请实现一个 vue3 防抖指令

Vue3 防抖指令可以通过自定义指令来实现，具体实现如下：

在 Vue3 中定义一个防抖函数：

const debounce = (fn, delay) => {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
};

在 Vue3 中定义一个防抖指令：

const DebounceDirective = {
  mounted(el, binding) {
    const { value, arg = 'click', delay = 500 } = binding;
    const fn = value;
    const debouncedFn = debounce(fn, delay);
    el.addEventListener(arg, debouncedFn);
  },
};

在 Vue3 中注册防抖指令：

const app = createApp(App);
app.directive('debounce', DebounceDirective);

在 Vue3 中使用防抖指令：

<template>
  <button v-debounce:click="handleClick">防抖按钮</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('点击了防抖按钮');
    },
  },
};
</script>

在上面的代码中，我们定义了一个 v-debounce 指令，并传入了三个参数：value 表示需要防抖的函数，arg 表示触发事件的类型，默认为 click，delay 表示防抖时间，默认为 500ms。然后在 mounted 钩子中，将防抖后的函数绑定到元素的事件上。最后，在组件中使用 v-debounce 指令即可。