使用vue3 setup语法糖封装一个节流组件

以下是使用Vue3 setup语法糖封装的节流组件代码示例：

<template>
  <div>
    <button @click="handleClick">Click me!</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const throttleTimeout = ref(null)

    function handleClick() {
      if (!throttleTimeout.value) {
        throttleTimeout.value = setTimeout(() => {
          console.log('Button clicked!')
          throttleTimeout.value = null
        }, 500)
      }
    }

    return {
      handleClick
    }
  }
}
</script>

在上面的代码中，我们使用了Vue3的`ref`函数来创建一个名为`throttleTimeout`的响应式变量，它用于控制节流的时间间隔。

在`handleClick`函数中，我们首先检查`throttleTimeout`是否为空，如果是，则创建一个新的定时器，并在`500`毫秒后执行回调函数。回调函数中输出了一个日志，表示按钮被点击了，并将`throttleTimeout`设置为空，以便下一次点击可以继续执行。

最后，我们将`handleClick`函数作为组件的输出值返回。在模板中，我们将它绑定到按钮的`@click`事件上，以便在用户单击按钮时执行节流操作。