vue3 ts hooks

在 Vue 3 中，使用 TypeScript（TS）和 Composition API，可以创建可重用的自定义 Hooks。自定义 Hooks 是一种将逻辑和状态共享的方式，可以用于组件中。

以下是一个使用 TypeScript 和 Composition API 创建自定义 Hooks 的示例：

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：

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 来提高开发效率和代码质量。