version: 2.3.0-beta.5

Author: NelsonYong

docs/demo/useDebounceFn/demo.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div>Click Count：{{ valueRef }}</div>
-    <vhp-button @click="() => run()">Click me!</vhp-button>
+    <br />
+    <vhp-button @click="() => (wait = 3000)">Update time 3000ms</vhp-button>
+    <vhp-button style="margin-left: 8px;" @click="() => run()">Click me!</vhp-button>
   </div>
 </template>
 
@@ -10,12 +12,13 @@
   import { useDebounceFn } from 'vue-hooks-plus'
   const valueRef = ref(0)
 
+  const wait = ref(1000)
   const { run } = useDebounceFn(
     () => {
       valueRef.value += 1
     },
     {
-      wait: 1000,
+      wait: wait,
     },
   )
 </script>

packages/hooks/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-hooks-plus",
-	"version": "2.3.0-beta.4",
+	"version": "2.3.0-beta.5",
 	"description": "Vue hooks library",
 	"files": [
 		"dist",

packages/hooks/src/useDebounceFn/index.ts

@@ -1,26 +1,26 @@
 import debounce from 'lodash-es/debounce'
-import { onUnmounted, ref, watch } from 'vue'
+import { onUnmounted, Ref, ref, watch } from 'vue'
 
 export interface DebounceOptions {
   /**
    * The number of milliseconds to delay.
    */
-  wait?: number
+  wait?: number | Ref<number, number>
 
   /**
    * Specify invoking on the leading edge of the timeout.
    */
-  leading?: boolean
+  leading?: boolean | Ref<boolean, boolean>
 
   /**
    * Specify invoking on the trailing edge of the timeout.
    */
-  trailing?: boolean
+  trailing?: boolean | Ref<boolean, boolean>
 
   /**
    * The maximum time func is allowed to be delayed before it’s invoked.
    */
-  maxWait?: number
+  maxWait?: number | Ref<number, number>
 }
 
 type noop = (...args: any) => any
@@ -34,6 +34,7 @@ function useDebounceFn<T extends noop>(fn: T, options?: DebounceOptions) {
     const { wait = 1000, ...rest } = optionsRef.value;
     return debounce(fn, wait, rest);
   };
+
   debouncedRef.value = createDebounced();
   watch(
     () => ({ ...optionsRef.value }),