vue3 composables封装一个通用的倒计时计时器逻辑，可复用到多个组件中，代码

在 Vue3 中，你可以使用 `Composition API` 的 `ref` 和 `watch` 功能来封装一个通用的倒计时计时器。`Composables` 是一种轻量级的模块化解决方案，它们可以复用在应用的多个组件中，提供纯粹的函数式逻辑。

以下是一个简单的倒计时计时器 `useCountdown` 示例：

// countdown.js 或者 count.vue/composables/countdown.vue
import { ref, watch } from 'vue';

export default function useCountdown(initialTime, unit = 'seconds') {
  const remainingTime = ref(initialTime);
  const timerId = ref(null);

  // 开始倒计时
  function start() {
    if (!timerId.value) {
      timerId.value = setInterval(() => {
        remainingTime.value--;
        // 如果时间到了，清除定时器并停止倒计时
        if (remainingTime.value === 0) {
          clearInterval(timerId.value);
          timerId.value = null;
        }
      }, unit === 'seconds' ? 1000 : unit === 'minutes' ? 60 * 1000 : undefined); // 根据单位调整间隔
    }
  }

  // 停止倒计时
  function stop() {
    clearInterval(timerId.value);
    timerId.value = null;
  }

  return {
    remainingTime,
    start,
    stop,
  };
}

然后在需要使用这个计时器的组件里，只需导入并使用它：

<template>
  <div>
    <p>剩余时间：{{ remainingTime }}</p>
    <button @click="start">开始</button>
    <button @click="stop">停止</button>
  </div>
</template>

<script setup>
import { useCountdown } from './countdown';

const { remainingTime, start, stop } = useCountdown(60, 'seconds'); // 初始化60秒
</script>