使用vue3 setup写一个计时器

下面是使用Vue 3的setup函数编写一个计时器的示例：

<template>
  <div>
    <h1>{{ formatTime }}</h1>
    <button @click="start">Start</button>
    <button @click="pause">Pause</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue';

export default {
  setup() {
    const time = ref(0);
    const isRunning = ref(false);

    const formatTime = computed(() => {
      const minutes = Math.floor(time.value / 60);
      const seconds = time.value % 60;
      return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    });

    let timer;

    const start = () => {
      isRunning.value = true;
      timer = setInterval(() => {
        time.value++;
      }, 1000);
    };

    const pause = () => {
      isRunning.value = false;
      clearInterval(timer);
    };

    const reset = () => {
      time.value = 0;
      isRunning.value = false;
      clearInterval(timer);
    };

    onMounted(() => {
      watch(isRunning, (newValue) => {
        if (newValue) {
          start();
        } else {
          pause();
        }
      });
    });

    return {
      formatTime,
      start,
      pause,
      reset
    };
  }
};
</script>

在这个示例中，我们使用了ref来创建一个响应式的time变量，用于存储计时器的秒数。我们还使用了ref来创建一个isRunning变量，用于表示计时器是否正在运行。

我们使用computed来创建一个formatTime计算属性，用于格式化显示时间。

start函数用于开始计时器，它将isRunning设置为true，并在每秒钟更新time的值。

pause函数用于暂停计时器，它将isRunning设置为false，并清除计时器。

reset函数用于重置计时器，它将time设置为0，isRunning设置为false，并清除计时器。

在onMounted钩子中，我们使用watch来监视isRunning的变化。当isRunning变为true时，我们调用start函数开始计时器，当isRunning变为false时，我们调用pause函数暂停计时器。

最后，我们将formatTime、start、pause和reset作为返回值，使它们可以在模板中使用