使用vue3完成一个时间计时器，按秒动态增加

在 Vue3 中创建一个简单的计时器组件，我们可以利用 JavaScript 的 `setInterval` 函数来实现每秒动态增加的时间显示。首先，我们需要创建一个 Vue 组件，并定义数据状态来存储当前时间。以下是步骤：

1. 安装依赖：

npm install vue

2. 创建一个名为 `Counter.vue` 的文件，内容如下：

<template>
  <div class="counter">
    <p>Countdown: {{ currentTime }} 秒</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
    };
  },
  mounted() {
    this.startTimer();
  },
  methods: {
    startTimer() {
      this.intervalId = setInterval(() => {
        if (this.currentTime < 60) { // 设置最大时间为一分钟
          this.currentTime++;
        } else {
          clearInterval(this.intervalId);
          this.currentTime = 0; // 重置计时
          alert("Time's up!"); // 可以在这里添加结束提示
        }
      }, 1000); // 每隔一秒执行一次
    },
    stopTimer() {
      clearInterval(this.intervalId);
    },
  },
};
</script>

<style scoped>
.counter {
  text-align: center;
}
</style>

在这个组件中，我们有一个数据属性 `currentTime` 来存储当前秒数，`mounted` 生命周期钩子在组件挂载后启动定时器。`startTimer` 方法使用了 `setInterval`，每次调用会将 `currentTime` 加一，直到达到一分钟（这里为了简化例子）。如果需要暂停或停止计时，可以添加 `stopTimer` 方法并传递给组件的按钮事件。

要在其他部分使用这个计时器，只需导入并在模板中插入这个组件：

<template>
  <div>
    <counter :visible.sync="showTimer"></counter>
    <button @click="toggleTimer">Start/Pause Timer</button>
  </div>
</template>

<script>
import Counter from './Counter.vue';

export default {
  components: {
    Counter,
  },
  data() {
    return {
      showTimer: true,
    };
  },
  methods: {
    toggleTimer() {
      this.showTimer ? this.$refs.timer.startTimer() : this.$refs.timer.stopTimer();
    },
  },
};
</script>

这里假设 `Counter` 元素有一个 ref 名为 `timer`，用于访问组件实例。你可以通过 `v-bind` 或者 `:ref` 属性将计时器暴露给外部使用。