使用组合式函数 Composables 封装一个通用的倒计时计时器逻辑，可复用到多个组件中

在Vue.js中，`Composables` 是一种轻量级的模块化功能，它允许你在整个应用中共享和复用逻辑，而不必创建新的组件。对于封装一个通用的倒计时计时器逻辑，你可以这样做：

// src/composables/countdown.js
export default {
  setup() {
    const initialTime = 60; // 倒计时的初始秒数
    const countdown = (time) => {
      if (time > 0) {
        setTimeout(() => {
          countdown(time - 1);
        }, 1000);
      } else {
        console.log('Countdown finished');
      }
    };

    // 初始化倒计时
    countdown(initialTime);

    return { countdown }; // 返回计时器函数供外部组件使用
  },
}

在这个`countdown` composable中，我们定义了一个递归函数，它会每秒减少时间并触发自身直到倒计时结束。外部组件可以像这样使用它：

<template>
  <div>
    <button @click="startCountdown">Start Countdown</button>
    <p v-if=countdown剩余的时间">{{ countdown }}</p>
  </div>
</template>

<script>
import { ref, onMounted, invokeAsync } from 'vue';
import countdown from '@/composables/countdown';

export default {
  setup() {
    const countdownTimer = ref(null); // 引用倒计时函数

    // 在组件挂载后启动倒计时
    onMounted(async () => {
      await invokeAsync(countdownTimer.value, 60); // 每秒更新倒计时
    });

    // 开始倒计时的方法
    const startCountdown = () => {
      countdownTimer.value(60); // 调用倒计时函数
    };

    return {
      startCountdown,
    };
  },
};
</script>