docs: fix & update

NelsonYong · NelsonYong · commit 45b06c83f2ce · 2025-04-13T11:30:06.000+08:00
diff --git a/docs/demo/useThrottle/demo.vue b/docs/demo/useThrottle/demo.vue
@@ -1,15 +1,19 @@
 <template>
   <div>
-    <input type="text" placeholder="input" v-model="valueRef">
+    <input type="text" placeholder="input" v-model="valueRef" />
     <p>ThrottledValue：{{ throttledValue }}</p>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { ref } from 'vue'
 
-  import { useThrottle } from 'vue-hooks-plus'
+  import { useThrottle, useTimeout } from 'vue-hooks-plus'
   const valueRef = ref('')
+  const waitRef = ref(500)
 
-  const throttledValue = useThrottle(valueRef, { wait: 500 })
+  useTimeout(() => {
+    waitRef.value = 2000
+  }, 2000)
+  const throttledValue = useThrottle(valueRef, { wait: waitRef })
 </script>
diff --git a/docs/en/hooks/useDebounce.md b/docs/en/hooks/useDebounce.md
@@ -35,7 +35,16 @@ const debouncedValue = useDebounce(
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| wait | The number of milliseconds to delay. | `number` | `1000` |
-| leading | Specify invoking on the leading edge of the timeout. | `boolean` | `false` |
-| trailing | Specify invoking on the trailing edge of the timeout. | `boolean` | `true` |
-| maxWait | The maximum time func is allowed to be delayed before it’s invoked. | `number` | - |
+| wait | The number of milliseconds to delay. | `number`\|`Ref<number>` | `1000` |
+| leading | Specify invoking on the leading edge of the timeout. | `boolean`\|`Ref<boolean>` | `false` |
+| trailing | Specify invoking on the trailing edge of the timeout. | `boolean`\|`Ref<boolean>` | `true` |
+| maxWait | The maximum time func is allowed to be delayed before it’s invoked. | `number`\|`Ref<number>` | - |
+
+::: warning Remark
+
+- `options.wait` support dynamic changes.
+- `options.leading` support dynamic changes.
+- `options.trailing` support dynamic changes.
+- `options.maxWait` support dynamic changes.
+
+:::
diff --git a/docs/en/hooks/useThrottle.md b/docs/en/hooks/useThrottle.md
@@ -33,8 +33,16 @@ const throttledValue = useThrottle(
 
 ## Options
 
-| Property | Description                                           | Type      | Default |
-| -------- | ----------------------------------------------------- | --------- | ------- |
-| wait     | The number of milliseconds to delay.                  | `number`  | `1000`  |
-| leading  | Specify invoking on the leading edge of the timeout.  | `boolean` | `true`  |
-| trailing | Specify invoking on the trailing edge of the timeout. | `boolean` | `true`  |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| wait | The number of milliseconds to delay. | `number`\|`Ref<number>` | `1000` |
+| leading | Specify invoking on the leading edge of the timeout. | `boolean`\|`Ref<boolean>` | `false` |
+| trailing | Specify invoking on the trailing edge of the timeout. | `boolean`\|`Ref<boolean>` | `true` |
+
+::: warning Remark
+
+- `options.wait` support dynamic changes.
+- `options.leading` support dynamic changes.
+- `options.trailing` support dynamic changes.
+
+:::
diff --git a/docs/en/hooks/useThrottleFn.md b/docs/en/hooks/useThrottleFn.md
@@ -37,11 +37,11 @@ const {
 
 ## Options
 
-| Property | Description                                           | Type      | Default |
-| -------- | ----------------------------------------------------- | --------- | ------- |
-| wait     | The number of milliseconds to delay.                  | `number`  | `1000`  |
-| leading  | Specify invoking on the leading edge of the timeout.  | `boolean` | `true`  |
-| trailing | Specify invoking on the trailing edge of the timeout. | `boolean` | `true`  |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| wait | The number of milliseconds to delay. | `number`\|`Ref<number>` | `1000` |
+| leading | Specify invoking on the leading edge of the timeout. | `boolean`\|`Ref<boolean>` | `false` |
+| trailing | Specify invoking on the trailing edge of the timeout. | `boolean`\|`Ref<boolean>` | `true` |
 
 ## Result
 
@@ -50,3 +50,11 @@ const {
 | run      | Invoke and pass parameters to fn.                      | `(...args: any[]) => any` |
 | cancel   | Cancel the invocation of currently throttled function. | `() => void`              |
 | flush    | Immediately invoke currently throttled function        | `() => void`              |
+
+::: warning Remark
+
+- `options.wait` support dynamic changes.
+- `options.leading` support dynamic changes.
+- `options.trailing` support dynamic changes.
+
+:::
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
@@ -1,15 +1,14 @@
 {
-  "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "./dist", //输出文件
     "lib": ["esnext", "dom"],
     "baseUrl": "./",
     "rootDir": "./",
-    "types": ["node", "vitest", "vitest/globals"],
+    "types": ["node"],
     "paths": {
       "vue-hooks-plus": ["../packages/hooks/src/index.ts"]
     }
   },
-  "include": ["src/**/*.ts", "demo/**/*.vue", "docs/global.d.ts"],
-  "exclude": ["node_modules", "dist", "lib", "es", "example", "test-utils/*"]
+  "extends": "../tsconfig.json",
+  "include": [".vitepress/**/*.ts", "./demo/**/*.vue", "./components/**/*.vue"]
 }
diff --git a/docs/zh/hooks/useDebounce.md b/docs/zh/hooks/useDebounce.md
@@ -33,11 +33,20 @@ const debouncedValue = useDebounce(
 | value   | 需要防抖的值   | `Ref<any>` | -      |
 | options | 配置防抖的行为 | `Options`  | -      |
 
+
 ## Options
 
 | 参数     | 说明                     | 类型      | 默认值  |
 | -------- | ------------------------ | --------- | ------- |
-| wait     | 超时时间，单位为毫秒     | `number`  | `1000`  |
-| leading  | 是否在延迟开始前调用函数 | `boolean` | `false` |
-| trailing | 是否在延迟开始后调用函数 | `boolean` | `true`  |
-| maxWait  | 最大等待时间，单位为毫秒 | `number`  | -       |
+| wait     | 超时时间，单位为毫秒     | `number`\|`Ref<number>` | `1000` |
+| leading  | 是否在延迟开始前调用函数 | `boolean`\|`Ref<boolean>` | `false` |
+| trailing | 是否在延迟开始后调用函数 | `boolean`\|`Ref<boolean>` | `true` |
+| maxWait  | 最大等待时间，单位为毫秒 | `number`  |-                         |
+
+::: warning 注意
+
+- `options.wait` 支持动态变化。
+- `options.leading` 支持动态变化。
+- `options.trailing` 支持动态变化。
+- `options.maxWait` 支持动态变化。
+:::
diff --git a/docs/zh/hooks/useDebounceFn.md b/docs/zh/hooks/useDebounceFn.md
@@ -39,10 +39,10 @@ const {
 
 | 参数     | 说明                     | 类型      | 默认值  |
 | -------- | ------------------------ | --------- | ------- |
-| wait     | 等待时间，单位为毫秒     | `number`  | `1000`  |
-| leading  | 是否在延迟开始前调用函数 | `boolean` | `false` |
-| trailing | 是否在延迟开始后调用函数 | `boolean` | `true`  |
-| maxWait  | 最大等待时间，单位为毫秒 | `number`  | -       |
+| wait     | 超时时间，单位为毫秒     | `number`\|`Ref<number>` | `1000` |
+| leading  | 是否在延迟开始前调用函数 | `boolean`\|`Ref<boolean>` | `false` |
+| trailing | 是否在延迟开始后调用函数 | `boolean`\|`Ref<boolean>` | `true` |
+| maxWait  | 最大等待时间，单位为毫秒 | `number`  |-                         |
 
 ## Result
 
@@ -51,3 +51,11 @@ const {
 | run    | 触发执行 fn，函数参数将会传递给 fn | `(...args: any[]) => any` |
 | cancel | 取消当前防抖                       | `() => void`              |
 | flush  | 立即调用当前防抖函数               | `() => void`              |
+
+::: warning 注意
+
+- `options.wait` 支持动态变化。
+- `options.leading` 支持动态变化。
+- `options.trailing` 支持动态变化。
+- `options.maxWait` 支持动态变化。
+:::
diff --git a/docs/zh/hooks/useThrottle.md b/docs/zh/hooks/useThrottle.md
@@ -35,6 +35,13 @@ const throttledValue = useThrottle(
 
 | 参数     | 说明                     | 类型      | 默认值 |
 | -------- | ------------------------ | --------- | ------ |
-| wait     | 等待时间，单位为毫秒     | `number`  | `1000` |
-| leading  | 是否在延迟开始前调用函数 | `boolean` | `true` |
-| trailing | 是否在延迟开始后调用函数 | `boolean` | `true` |
+| wait     | 超时时间，单位为毫秒     | `number`\|`Ref<number>` | `1000` |
+| leading  | 是否在延迟开始前调用函数 | `boolean`\|`Ref<boolean>` | `false` |
+| trailing | 是否在延迟开始后调用函数 | `boolean`\|`Ref<boolean>` | `true` |
+
+::: warning 注意
+
+- `options.wait` 支持动态变化。
+- `options.leading` 支持动态变化。
+- `options.trailing` 支持动态变化。
+:::
diff --git a/docs/zh/hooks/useThrottleFn.md b/docs/zh/hooks/useThrottleFn.md
@@ -39,9 +39,9 @@ const {
 
 | 参数     | 说明                     | 类型      | 默认值 |
 | -------- | ------------------------ | --------- | ------ |
-| wait     | 等待时间，单位为毫秒     | `number`  | `1000` |
-| leading  | 是否在延迟开始前调用函数 | `boolean` | `true` |
-| trailing | 是否在延迟开始后调用函数 | `boolean` | `true` |
+| wait     | 超时时间，单位为毫秒     | `number`\|`Ref<number>` | `1000` |
+| leading  | 是否在延迟开始前调用函数 | `boolean`\|`Ref<boolean>` | `false` |
+| trailing | 是否在延迟开始后调用函数 | `boolean`\|`Ref<boolean>` | `true` |
 
 ## Result
 
@@ -50,3 +50,10 @@ const {
 | run    | 触发执行 fn，函数参数将会传递给 fn | `(...args: any[]) => any` |
 | cancel | 取消当前节流                       | `() => void`              |
 | flush  | 当前节流立即调用                   | `() => void`              |
+
+::: warning 注意
+
+- `options.wait` 支持动态变化。
+- `options.leading` 支持动态变化。
+- `options.trailing` 支持动态变化。
+:::
diff --git a/packages/hooks/src/useRequest/plugins/useThrottlePlugin.ts b/packages/hooks/src/useRequest/plugins/useThrottlePlugin.ts
@@ -1,4 +1,4 @@
-import { computed, unref, watchEffect } from 'vue'
+import { computed, onUnmounted, ref, unref, watch } from 'vue'
 import { type DebouncedFunc, type ThrottleSettings } from 'lodash-es'
 import { throttle } from 'lodash-es'
 import { UseRequestPlugin } from '../types'
@@ -7,6 +7,9 @@ const useThrottlePlugin: UseRequestPlugin<unknown, unknown[]> = (
   fetchInstance,
   { throttleWait, throttleLeading, throttleTrailing },
 ) => {
+
+  let originThrottled: DebouncedFunc<any> | null = null
+
   const options = computed(() => {
     const ret: ThrottleSettings = {}
     if (unref(throttleLeading) !== undefined) {
@@ -18,44 +21,51 @@ const useThrottlePlugin: UseRequestPlugin<unknown, unknown[]> = (
     return ret
   })
 
-  // @ts-ignore
-  const throttledRef = computed<DebouncedFunc<any>>(() =>
-    throttle(
-      (callback: () => void) => {
+  const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance)
+  const throttled = ref<DebouncedFunc<any>>()
+
+  watch([throttleWait, options], (cur) => {
+    if (originThrottled) {
+      originThrottled.cancel()
+      fetchInstance.runAsync = _originRunAsync
+    }
+    const [curWait, curOptions] = cur
+    const _throttle = throttle(
+      (callback: any) => {
         callback()
       },
-      unref(throttleWait),
-      options.value,
-    ),
-  )
-
-  watchEffect(onInvalidate => {
-    if (unref(throttleWait)) {
-      const _originRunAsync = fetchInstance.runAsync.bind(fetchInstance)
-      fetchInstance.runAsync = (...args) => {
-        return new Promise((resolve, reject) => {
-          throttledRef.value?.(() => {
-            _originRunAsync(...args)
-              .then(resolve)
-              .catch(reject)
-          })
+      // @ts-ignore
+      unref(curWait),
+      // @ts-ignore
+      curOptions,
+    )
+    originThrottled = _throttle
+    throttled.value = _throttle
+    fetchInstance.runAsync = (...args) => {
+      return new Promise((resolve, reject) => {
+        throttled.value?.(() => {
+          _originRunAsync(...args)
+            .then(resolve)
+            .catch(reject)
         })
-      }
-      onInvalidate(() => {
-        fetchInstance.runAsync = _originRunAsync
-        throttledRef.value?.cancel()
       })
     }
+  }, {
+    immediate: true,
   })
 
   if (!unref(throttleWait)) {
     return {}
   }
 
+  onUnmounted(() => {
+    throttled.value?.cancel()
+  })
+
   return {
     name: "throttlePlugin",
     onCancel: () => {
-      throttledRef.value?.cancel()
+      throttled.value?.cancel()
     },
   }
 }
diff --git a/packages/hooks/src/useThrottle/index.ts b/packages/hooks/src/useThrottle/index.ts
@@ -2,13 +2,13 @@ import { Ref, ref, watch } from 'vue'
 import useThrottleFn from '../useThrottleFn'
 
 export interface UseThrottleOptions {
-  wait?: number
-  leading?: boolean
-  trailing?: boolean
+  wait?: number | Ref<number>
+  leading?: boolean | Ref<boolean>
+  trailing?: boolean | Ref<boolean>
 }
 
 function useThrottle<T>(value: Ref<T>, options?: UseThrottleOptions) {
-  const throttled = ref()
+  const throttled = ref<T>() as Ref<T>
 
   throttled.value = value.value
 
@@ -19,7 +19,7 @@ function useThrottle<T>(value: Ref<T>, options?: UseThrottleOptions) {
   watch(
     value,
     () => {
-      run.value()
+      run?.()
     },
     {
       immediate: true,
diff --git a/packages/hooks/src/useThrottleFn/__tests__/index.spec.ts b/packages/hooks/src/useThrottleFn/__tests__/index.spec.ts
@@ -9,40 +9,33 @@ describe('useThrottleFn', () => {
       count++
     }
     const [hook] = renderHook(() => useThrottleFn(throttleFn, { wait: 500 }))
-    hook.run.value()
+    hook.run?.()
     expect(count).toBe(1)
-    hook.run.value()
-    hook.run.value()
-    hook.run.value()
+    hook.run?.()
+    hook.run?.()
+    hook.run?.()
     expect(count).toBe(1)
     await sleep(450) // t: 450
-    hook.run.value()
+    hook.run?.()
     expect(count).toBe(1)
     await sleep(100) // t: 550
-    hook.run.value()
+    hook.run?.()
     expect(count).toBe(2)
-    hook.run.value()
-    hook.run.value()
+    hook.run?.()
+    hook.run?.()
     await sleep(500) // t: 1050
     expect(count).toBe(3)
-    hook.run.value()
-    hook.run.value()
-    hook.cancel()
+    hook.run?.()
+    hook.run?.()
+    hook.cancel?.()
     await sleep(500) // t: 1550
     expect(count).toBe(4)
-    hook.run.value()
-    hook.run.value()
+    hook.run?.()
+    hook.run?.()
     expect(count).toBe(5)
-    hook.flush()
+    hook.flush?.()
     expect(count).toBe(6)
     await sleep(550) // t: 2100
     expect(count).toBe(6)
   })
-
-  // it('should output error when fn is not a function', () => {
-  //   const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-  //   renderHook(() => useThrottleFn(1 as any));
-  //   expect(errSpy).toBeCalledWith('useThrottleFn expected parameter is a function, got number');
-  //   errSpy.mockRestore();
-  // });
 })
diff --git a/packages/hooks/src/useThrottleFn/index.ts b/packages/hooks/src/useThrottleFn/index.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,14 @@`
`1`	`1`	`{`
`2`		`- "extends": "../tsconfig.json",`
`3`	`2`	`"compilerOptions": {`
`4`	`3`	`"outDir": "./dist", //输出文件`
`5`	`4`	`"lib": ["esnext", "dom"],`
`6`	`5`	`"baseUrl": "./",`
`7`	`6`	`"rootDir": "./",`
`8`		`- "types": ["node", "vitest", "vitest/globals"],`
	`7`	`+ "types": ["node"],`
`9`	`8`	`"paths": {`
`10`	`9`	`"vue-hooks-plus": ["../packages/hooks/src/index.ts"]`
`11`	`10`	`}`
`12`	`11`	`},`
`13`		`- "include": ["src/*/.ts", "demo/*/.vue", "docs/global.d.ts"],`
`14`		`- "exclude": ["node_modules", "dist", "lib", "es", "example", "test-utils/*"]`
	`12`	`+ "extends": "../tsconfig.json",`
	`13`	`+ "include": [".vitepress/*/.ts", "./demo/*/.vue", "./components/*/.vue"]`
`15`	`14`	`}`