feat(useThrottle): 添加节流功能的Hook及文档

- 新增 `useThrottle` 和 `useThrottleFn` 两个Hook，用于处理节流逻辑。
- 在 `packages/hooks/src/` 目录下分别实现了 `useThrottle` 和 `useThrottleFn` 的功能。
- 为 `useThrottle` 和 `useThrottleFn` Hook分别添加了详细的API文档和示例代码。

docs/.vitepress/generate-router.js

@@ -1,7 +1,7 @@
 const Router = {
   Dom: ['useEventListener', 'useWindowSize', 'useClickAway', 'useHover', 'useRect', "useFullscreen"],
-  State: ['useToggle', 'useBoolean', "useLocalStorage", "useDebounce"],
+  State: ['useToggle', 'useBoolean', "useLocalStorage", "useDebounce", "useThrottle"],
   Worker: ['useCountDown'],
-  Effect: ["useDebounceFn"]
+  Effect: ["useDebounceFn", "useThrottleFn"]
 };
 export default Router;

docs/useThrottle/demo/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="hello">
+    <p>value: {{ throttleValue }}</p>
+
+    <a-input v-model:value="throttleCurrValue" class="mb10" />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import { useThrottle } from 'zhongjiayao_v3_hooks';
+
+  const throttleCurrValue = ref(1);
+  const throttleValue = useThrottle(throttleCurrValue, 500);
+</script>

docs/useThrottle/index.md

@@ -0,0 +1,16 @@
+# useThrottle
+
+用来处理节流值的 Hook。
+
+## 基本使用
+
+<preview path="./demo/index.vue" title="基本使用" description='ThrottledValue 每隔 500ms 变化一次。'></preview>
+
+## Api
+
+### 参数
+
+| 参数  | 说明                 | 类型   | 默认值 |
+| :---- | :------------------- | :----- | :----- |
+| value | 需要节流的值         | any    | -      |
+| wait  | 超时时间，单位为毫秒 | number | 1000   |

docs/useThrottleFn/demo/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <p class="mb10">count: {{ throttleFnValue }}</p>
+  <a-button @click="run">Click me</a-button>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import { useThrottleFn } from 'zhongjiayao_v3_hooks';
+
+  const throttleFnValue = ref(1);
+  const { run } = useThrottleFn(() => {
+    throttleFnValue.value++;
+  }, 500);
+</script>

docs/useThrottleFn/index.md

@@ -0,0 +1,5 @@
+# useThrottleFn
+
+## 基本使用
+
+<preview path="./demo/index.vue" title="基本使用" description='频繁调用 run，但只会每隔 500ms 执行一次相关函数。'></preview>

packages/hooks/src/index.ts

@@ -10,6 +10,8 @@ import useFullscreen from "./useFullscreen";
 import useLocalStorage from "./useLocalStorage";
 import useDebounce from "./useDebounce";
 import useDebounceFn from "./useDebounceFn";
+import useThrottle from "./useThrottle";
+import useThrottleFn from "./useThrottleFn";
 export {
   useBoolean,
   useToggle,
@@ -22,5 +24,7 @@ export {
   useFullscreen,
   useLocalStorage,
   useDebounce,
-  useDebounceFn
+  useDebounceFn,
+  useThrottle,
+  useThrottleFn
 };

packages/hooks/src/useThrottle/demo/index.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="hello">
+    <p>value: {{ throttleValue }}</p>
+
+    <a-input v-model:value="throttleCurrValue" class="mb10" />
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import { useThrottle } from 'zhongjiayao_v3_hooks';
+
+  const throttleCurrValue = ref(1);
+  const throttleValue = useThrottle(throttleCurrValue, 500);
+</script>

packages/hooks/src/useThrottle/index.md

@@ -0,0 +1,16 @@
+# useThrottle
+
+用来处理节流值的 Hook。
+
+## 基本使用
+
+<preview path="./demo/index.vue" title="基本使用" description='ThrottledValue 每隔 500ms 变化一次。'></preview>
+
+## Api
+
+### 参数
+
+| 参数  | 说明                 | 类型   | 默认值 |
+| :---- | :------------------- | :----- | :----- |
+| value | 需要节流的值         | any    | -      |
+| wait  | 超时时间，单位为毫秒 | number | 1000   |

packages/hooks/src/useThrottle/index.ts

@@ -0,0 +1,25 @@
+import { ref, Ref, watch } from 'vue';
+import useThrottleFn from '../useThrottleFn';
+
+// 默认值
+const defaultDelay: number = 1000;
+
+/**
+ * 处理节流值
+ * @param value
+ * @param delay
+ * @returns
+ */
+function useThrottle<T>(value: Ref<T>, delay?: number) {
+  delay = delay || defaultDelay;
+
+  const res = ref<T>(value.value) as Ref<T>;
+
+  // 利用useThrottleFn来简化处理值
+  const { run } = useThrottleFn(() => (res.value = value.value), delay);
+
+  watch(value, () => run(), { deep: true });
+
+  return res;
+}
+export default useThrottle;

packages/hooks/src/useThrottleFn/demo/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <p class="mb10">count: {{ throttleFnValue }}</p>
+  <a-button @click="run">Click me</a-button>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import { useThrottleFn } from 'zhongjiayao_v3_hooks';
+
+  const throttleFnValue = ref(1);
+  const { run } = useThrottleFn(() => {
+    throttleFnValue.value++;
+  }, 500);
+</script>

packages/hooks/src/useThrottleFn/index.md

@@ -0,0 +1,5 @@
+# useThrottleFn
+
+## 基本使用
+
+<preview path="./demo/index.vue" title="基本使用" description='频繁调用 run，但只会每隔 500ms 执行一次相关函数。'></preview>

packages/hooks/src/useThrottleFn/index.ts

@@ -0,0 +1,15 @@
+import { Fn, throttle } from '../utils';
+
+const defaultDelay: number = 1000;
+
+/**
+ * 处理节流函数
+ * @param fn
+ * @param delay
+ * @returns
+ */
+function useThrottleFn(fn: Fn, delay?: number) {
+  const run = throttle(fn, typeof delay === 'number' ? delay : defaultDelay);
+  return { run };
+}
+export default useThrottleFn;