useDebounce

useDebounce 用于处理防抖值。

基础用法

<template>
  <div>
    <label>Value:</label>
    <input
      type="text"
      :value="value"
      placeholder="请输入"
      @input="
        (e) => {
          changeValue(e);
        }
      "
    />
    <div>debouncedValue{{ debouncedValue }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, Ref } from "vue";
import { useDebounce } from "hooks-vue3";
const value = ref("1");
const debouncedValue = useDebounce<Ref<string>>(value, {
  wait: 500,
});
const changeValue = (e: any) => {
  value.value = e.target.value;
};

watch(debouncedValue, () => {
  console.log("debouncedValue", debouncedValue);
});
</script>

API

import type { DebounceSettings } from 'lodash-es/debounce';
interface Options extends DebounceSettings {
  wait?: number;
}
const debounceValue = useDebounce(value:T,{ wait: Options });

参数

• value (T): 要防抖动的值。

• [wait=1000] (number): 需要延迟的毫秒数。

• [options=] (Object): 选项对象。

• [options.leading=false] (boolean): 指定在延迟开始前调用。

• [options.maxWait] (number): 设置 func 允许被延迟的最大值。

• [options.trailing=true] (boolean): 指定在延迟结束后调用。