使用vue3和js实现在页面初始化的时候添加一个计时器，初始值为00:00:00，并按秒递增，并在页面中实时显示

在Vue3中创建一个页面初始化时自动启动并实时更新的计时器，你可以使用`<script setup>`、`ref`以及`setTimeout`函数。首先，你需要引入Vue的运行时库，并设置一个名为`timer`的引用变量来存储当前的时间。

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

import { ref } from 'vue';

// 初始化一个表示当前时间的ref
const currentTime = ref("00:00:00");

// 定义一个定时器函数来每秒更新时间
function startTimer() {
  const timerId = setInterval(() => {
    // 每秒更新时间，这里只是一个简单的示例，实际应用可能需要更复杂的日期处理
    currentTime.value = addSeconds(currentTime.value, 1);
  }, 1000);
}

// 首次加载页面时启动计时器
startTimer();

// 示例函数用于增加秒数，这里只增加了字符串形式的时间
function addSeconds(timeStr, seconds) {
  // 实现逻辑，例如分割字符串、计算新的分钟和小时等，然后组合成新的时间格式
  // 这部分根据需求自定义，下面仅做简单展示
  const [hours, minutes, secondsStr] = timeStr.split(':');
  return `${padZero(hours, 2)}:${padZero(minutes, 2)}:${padZero((parseInt(secondsStr) + seconds).toString(), 2)}`;
}

// padZero用于保证数字前有两位零
function padZero(num, len) {
  return num.toString().padStart(len, '0');
}

onBeforeUnmount(() => {
  clearInterval(timerId); // 计时器销毁时停止计时
})

当用户离开或刷新页面时，`onBeforeUnmount`钩子会确保计时器在组件卸载时被清除，避免资源泄漏。