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

在Vue3中，`composables`是一种新的特性，它允许你在单个文件（通常是`.js`或`.ts`）中声明独立于视图和组件逻辑的小型函数或对象，以供整个应用共享。如果你想封装一个通用的倒计时计时器逻辑，你可以创建一个名为`counter.ts`的文件，内容如下：

// counter.ts
import { ref, onMounted } from 'vue';

export default function useCountdown(targetTime: number) {
  const remainingTime = ref(targetTime);
  let intervalId;

  // 初始化计时器
  onMounted(() => {
    intervalId = setInterval(() => {
      if (remainingTime.value > 0) {
        remainingTime.value--;
      } else {
        clearInterval(intervalId);
      }
    }, 1000); // 每秒更新一次
  });

  // 提供公共方法来开始、暂停和重置计时器
  const start = () => {
    if (!intervalId) {
      intervalId = setInterval(...);
    }
  };
  
  const pause = () => {
    clearInterval(intervalId);
  };

  const reset = () => {
    remainingTime.value = targetTime;
    pause();
  };

  return {
    remainingTime,
    start,
    pause,
    reset,
  };
}

然后，在需要使用倒计时功能的`.vue`组件中，导入并使用这个`useCountdown`：

<template>
  <div>
    <p>剩余时间: {{ remainingTime }}</p>
    <button @click="start">开始</button>
    <button @click="pause">暂停</button>
    <button @click="reset">重置</button>
  </div>
</template>

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

const { remainingTime, start, pause, reset } = useCountdown(60); // 示例目标时间为60秒

onMounted(() => {
  // 初始化计时器
  start();
});
</script>