使用vue3 封装一个防抖组件

以下是一个使用Vue3封装的防抖组件：

<template>
  <div>
    <slot v-bind:debounced-value="debouncedValue" />
  </div>
</template>

<script>
import { debounce } from 'lodash-es';
import { ref, watch } from 'vue';

export default {
  name: 'Debounce',
  props: {
    value: {
      required: true,
    },
    delay: {
      type: Number,
      default: 500,
    },
  },
  setup(props) {
    const debouncedValue = ref(props.value);

    const debouncedUpdate = debounce((value) => {
      debouncedValue.value = value;
    }, props.delay);

    watch(
      () => props.value,
      (newValue) => {
        debouncedUpdate(newValue);
      },
    );

    return { debouncedValue };
  },
};
</script>

在这个组件中，我们使用了Lodash库中的`debounce`函数来实现防抖效果。我们通过`watch`监听`props.value`的变化，并在变化时调用`debouncedUpdate`函数，这个函数会在一定时间内延迟执行，以达到防抖的效果。最终，我们将防抖后的值传递给插槽，供父组件使用。