> For the complete documentation index, see [llms.txt](https://laterly.gitbook.io/hooks-vue3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laterly.gitbook.io/hooks-vue3/usedebouncewatch.md).

# useDebounceWatch

#### 基础用法

```html
<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

```typescript
useDebounceWatch(count,callback,options);
```

### 参数TS类型

```typescript
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 
```

```typescript
```