<template>
<div ref="time">{{ time.value }}</div>
</template>
<script setup lang="ts">
let timeString = ref("");
function updateTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, "0");
const minutes = String(now.getMinutes()).padStart(2, "0");
const seconds = String(now.getSeconds()).padStart(2, "0");
// 格式化时间显示为 HH:mm:ss
timeString.value = `${hours}:${minutes}:${seconds}`;
}
onMounted(() => {
updateTime();
});
const timer = setInterval(() => {
updateTime();
}, 1000);
onUnmounted(() => {
clearInterval(timer);
});
</script>
注意
一开始把const now = new Date();放在updateTime函数外，发现每次打印都是同一个时间，以为是失去了响应式，但是把时分秒都改成响应式变量打印的还是同一个时间，考虑Date是一个闭包对象，它捕获了最初执行时的Date对象，而不是在每次调用时都创建一个新的Date对象。问了chatgpt他说：在JavaScript中，Date对象是这么设计的：当你创建一个Date对象时，它表示一个特定的时间点。一旦这个对象被创建，它表示的时间点就固定下来了，不会随时间变化。Date对象本身并不包含一个内部时钟或定时器，它不会自动更新。
注释
padStart() 方法是JavaScript中的一个字符串原生方法，它用于用另一个字符串填充当前字符串（如果需要的话），以便产生所需长度的新字符串。第一个参数是所需新字符串的长度，第二个参数是用于填充的字符串。
使用padStart()格式化时间：
复制
const time = "9:07";
console.log(time.padStart(8, '0')); // 输出："0009:07"
