vue3怎么在页面显示一个从00:00:00动态的每秒递增的计时器

在Vue3中，你可以使用`<template>`、`<script>`以及一些JavaScript和Vue生命周期钩子来实现一个动态的秒级计时器。这里是一个简单的示例：

<template>
  <div id="timer">
    <p>{{ currentTime }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      currentTime: ref('00:00:00')
    };
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      const intervalId = setInterval(() => {
        let hours = Math.floor(this.currentTime.value.getHours());
        let minutes = Math.floor((this.currentTime.value.getMinutes() + 1) % 60);
        let seconds = Math.floor((this.currentTime.value.getSeconds() + 1) % 60);

        // 格式化时间
        if (seconds >= 10) {
          seconds = String(seconds).slice(1);
        }
        if (minutes < 10) {
          minutes = '0' + minutes;
        }
        if (hours < 10) {
          hours = '0' + hours;
        }

        this.currentTime.value = `${hours}:${minutes}:${seconds}`;
        // 每隔一秒钟更新一次
        if (hours === 23 && minutes === 59) {
          this.currentTime.value = '00:00:00';
        }
      }, 1000); // 每秒更新

      // 如果组件卸载时停止计时器
      this.$onBeforeUnmount(() => clearInterval(intervalId));
    }
  }
};
</script>

在这个例子中，我们创建了一个`currentTime`ref来存储当前的时间，并在`mounted`生命周期钩子中启动计时器。`startTimer`方法每隔一秒更新`currentTime`的值并格式化它，如果到了一天的最后一分钟，就将小时和分钟重置到00。