vue3 setup 实现 计时

以下是使用Vue3 setup实现计时的示例代码：

<template>
  <div>
    <p>{{ time }}</p>
    <button @click="startTimer" :disabled="isCounting">开始计时</button>
    <button @click="stopTimer" :disabled="!isCounting">停止计时</button>
  </div>
</template>

<script setup>
import { ref, watch, onBeforeUnmount } from "vue";

const time = ref(0);
const isCounting = ref(false);
let timer;

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

const stopTimer = () => {
  isCounting.value = false;
  clearInterval(timer);
};

watch(isCounting, (newVal) => {
  if (!newVal) {
    time.value = 0;
  }
});

onBeforeUnmount(() => {
  clearInterval(timer);
});
</script>

在上述代码中，我们使用了`ref`函数来创建响应式的变量`time`和`isCounting`。`time`用于存储计时的秒数，`isCounting`用于表示计时是否正在进行。

我们还使用了`watch`函数来监听`isCounting`的变化，当计时停止时，将计时秒数重置为0。

在`startTimer`函数中，我们使用`setInterval`函数每秒增加`time`的值，实现计时的效果。

最后，在组件销毁前，我们使用`onBeforeUnmount`钩子函数清除计时器。

你可以将上述代码复制到Vue3的项目中，然后在组件中使用`<Timer></Timer>`来使用计时组件。