VUE3 之 HOOKS公共方法封装(TS)

在 Vue 3 中，使用 TypeScript（TS）和 Composition API，可以创建可重用的自定义 Hooks。自定义 Hooks 是一种将逻辑和状态共享的方式，可以用于组件中。 以下是一个使用 TypeScript 和 Composition API 创建自定义 Hooks 的示例： ```typescript import { ref, onMounted, onUnmounted } from 'vue'; export function useCounter(initialValue: number, interval: number) { const count = ref(initialValue); let timer: NodeJS.Timeout; function start() { timer = setInterval(() => { count.value++; }, interval); } function stop() { clearInterval(timer); count.value = initialValue; } onMounted(start); onUnmounted(stop); return { count, start, stop }; } ``` 在上面的示例中，我们创建了一个名为 `useCounter` 的自定义 Hook。它接收一个初始值 `initialValue` 和一个时间间隔 `interval`。使用 `ref` 创建了一个可响应的 `count` 变量，并定义了 `start` 和 `stop` 方法用于启动和停止计数器。 在 `onMounted` 生命周期钩子中，我们调用了 `start` 方法来启动计数器。在 `onUnmounted` 生命周期钩子中，我们调用了 `stop` 方法来停止计数器。 在组件中使用自定义 Hook： ```typescript import { defineComponent } from 'vue'; import { useCounter } from '@/hooks/useCounter'; export default defineComponent({ setup() { const { count, start, stop } = useCounter(0, 1000); return { count, start, stop }; } }); ``` 在组件的 `setup` 函数中，我们使用 `useCounter` 自定义 Hook，获取了 `count`、`start` 和 `stop` 变量。然后我们可以在组件模板中使用它们。 自定义 Hooks 可以帮助我们将逻辑和状态进行封装，使代码更加模块化和可复用。在 Vue 3 中，结合 TypeScript 和 Composition API，可以更好地利用自定义 Hooks 来提高开发效率和代码质量。