请实现一个vue3防抖节流指令

以下是一个基于Vue3的防抖节流指令的实现：

import { onMounted, onUnmounted } from 'vue'

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

const throttle = (fn, interval = 500) => {
  let timer = null
  let now = Date.now()
  return function() {
    const context = this
    const args = arguments
    const elapsed = Date.now() - now
    if (elapsed >= interval) {
      fn.apply(context, args)
      now = Date.now()
    } else {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(context, args)
        now = Date.now()
      }, interval - elapsed)
    }
  }
}

const debounceDirective = {
  mounted(el, binding) {
    const { value, arg } = binding
    const delay = arg ? parseInt(arg, 10) : 500
    const debounced = debounce(value, delay)
    el._debounced = debounced
    el.addEventListener('input', debounced)
  },
  unmounted(el) {
    el.removeEventListener('input', el._debounced)
    el._debounced = null
  },
}

const throttleDirective = {
  mounted(el, binding) {
    const { value, arg } = binding
    const interval = arg ? parseInt(arg, 10) : 500
    const throttled = throttle(value, interval)
    el._throttled = throttled
    el.addEventListener('input', throttled)
  },
  unmounted(el) {
    el.removeEventListener('input', el._throttled)
    el._throttled = null
  },
}

const useDebounce = debounce
const useThrottle = throttle

export { debounceDirective, throttleDirective, useDebounce, useThrottle }

在上面的代码中，我们先实现了一个 debounce 和 throttle 函数，分别用于防抖和节流。然后我们定义了两个指令 debounceDirective 和 throttleDirective，分别对应防抖和节流。这两个指令在 mounted 阶段会添加监听器，当触发事件时会执行防抖或节流函数。在 unmounted 阶段则移除监听器。

最后，我们还导出了 useDebounce 和 useThrottle 两个函数，可以在 Vue 组件中使用，用于自定义防抖或节流函数。例如：

import { useDebounce } from './debounce-throttle'

export default {
  setup() {
    const search = useDebounce((query) => {
      // 发送搜索请求
    }, 500)
    return {
      search,
    }
  },
}

在上面的代码中，我们使用 useDebounce 自定义了一个 search 函数，用于防抖搜索请求。这个函数可以直接在 Vue 组件中调用。