使用vue3，给定一个开始时间，使用js完成一个时分秒的动态计时器

在Vue3中，你可以使用JavaScript的`setInterval`函数创建一个动态的计时器，结合模板绑定和计算属性来实现时分秒的更新。首先，你需要在组件的data部分定义初始时间和计时器的引用。接下来，设置一个定时器函数，每秒更新一次当前的时间。

<template>
  <div>
    <h1>计时器: {{ currentTime }}</h1>
  </div>
</template>

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

// 定义开始时间、当前时间和定时器变量
const startTime = ref(new Date()); // 开始时间，例如 "2023-04-01T12:00:00"
let intervalId;

// 计算属性获取并格式化当前时间
const currentTime = computed(() => {
  const now = new Date();
  const diff = now - startTime.value;
  const seconds = Math.floor(diff / 1000);
  
  return formatTime(seconds);
});

// 格式化时间（这里仅做示例，实际可以根据需求调整）
function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
});

// 初始化函数，启动计时器
async function startTimer() {
  try {
    intervalId = setInterval(() => {
      currentTime.value = formatTime(Date.now() - startTime.value);
    }, 1000); // 每隔1秒更新
  } catch (error) {
    console.error('Error starting timer:', error);
  }
}

// 渲染前调用startTimer初始化计时器
onMounted(startTimer);

// 组件销毁时清理计时器防止内存泄漏
onBeforeUnmount(() => clearInterval(intervalId));
</script>

在这个例子中，当组件挂载时，会调用`startTimer`函数启动计时器，并在组件卸载之前停止它。`currentTime`是一个计算属性，会实时根据`startTime`和当前时间的差值来更新显示的时分秒。