useDebounceWatch

useDebounceWatch 跟watch类似，可以控制函数在多次触发的防抖。

基础用法

<template>
  <div>Hello World! {{count}}</div>
  <button @click="count++">Add</button>
</template>

<script setup lang="ts">
import { ref } from "vue";
const count = ref<number>(0);
import { useDebounceWatch } from "hooks-vue3";
useDebounceWatch(
  count,
  (newVal, oldVale) => {
    console.log("newVal", newVal, oldVale);
  },
  {
    wait: 300,
  }
);
</script>

API

useDebounceWatch(count,callback,options);

参数TS类型

import type { DebounceSettings } from 'lodash-es';

import type {
  WatchCallback,
  WatchOptions,
  WatchSource,
  WatchStopHandle,
} from 'vue';

export interface DebounceOptions extends DebounceSettings {
  wait?: number;
}

function useDebounceWatch<T = any, Immediate extends Readonly<boolean> = false>(
  source: T | WatchSource<T>,
  cb: WatchCallback<T>,
  options?: WatchOptions<Immediate> & DebounceOptions,
): WatchStopHandle