vue3内置的debounce使用方法

在 Vue 3 中，可以使用 `lodash` 库的 `debounce` 方法或者 Vue 3 内置的 `debounce` 方法来实现防抖。

使用 Vue 3 内置的 `debounce` 方法可以通过 `watch` 函数的 `debounce` 选项来指定防抖的时间。例如：

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const inputValue = ref('');
    const handleInput = debounce((value) => {
      console.log(value);
    }, 500);

    return {
      inputValue,
      handleInput,
    };
  },
  watch: {
    inputValue: {
      immediate: false,
      handler(value) {
        this.handleInput(value);
      },
      debounce: {
        // 指定防抖时间为 500ms
        wait: 500,
      },
    },
  },
});

在上面的例子中，`inputValue` 是一个响应式的变量，`handleInput` 是一个防抖函数，用来处理输入框的输入事件。在 `watch` 函数中，通过 `debounce` 选项来指定防抖时间为 500ms，当 `inputValue` 发生变化时，会调用 `handleInput` 函数，并且会等待 500ms 后再执行。

需要注意的是，`watch` 函数必须设置 `immediate: false`，否则会在组件初始化时立即执行一次。如果你需要在组件初始化时执行一次防抖函数，可以在 `setup` 函数中手动调用一次。