Vue.js时钟使用setInterval无法自动刷新问题求助

你的时钟不更新的核心问题是：初始化时创建的today对象是固定的，每次调用getCurrentTime都在读取同一个旧时间，而非实时获取当前时间。

修正后的代码 #

脚本部分（<script setup>）

import { 
    reactive, 
    onMounted,
    onBeforeUnmount 
} from 'vue';

const data = reactive({
    date: '',
    time: ''
});

let timer = null;

const getCurrentTime = () => {
    // 每次调用都创建新的Date对象，获取实时时间
    const today = new Date();
    
    const zeroPadding = (num) => num < 10 ? `0${num}` : num;
    
    // 更新时间
    const hours = zeroPadding(today.getHours());
    const minutes = zeroPadding(today.getMinutes());
    const seconds = zeroPadding(today.getSeconds());
    data.time = `${hours}:${minutes}:${seconds}`;
    
    // 补充日期更新（匹配你的模板需求）
    const year = today.getFullYear();
    const month = zeroPadding(today.getMonth() + 1);
    const day = zeroPadding(today.getDate());
    data.date = `${year}-${month}-${day}`;
}

onMounted(() => {
    // 初始化时先调用一次，避免页面加载时时间为空
    getCurrentTime();
    timer = setInterval(getCurrentTime, 1000);
});

onBeforeUnmount(() => {
    // 组件卸载前清除定时器，防止内存泄漏
    if (timer) clearInterval(timer);
});

模板部分

<div class="time">
    <time class="time__date">{{ data.date }}</time>
    <time class="time__hour">{{ data.time}}</time>
</div>

关键修改说明 #

1. 实时获取时间：将new Date()移到getCurrentTime函数内部，确保每次调用都能拿到最新的系统时间。
2. 初始化调用：在onMounted中先手动调用一次getCurrentTime，避免页面刚加载时时间为空。
3. 清理定时器：利用onBeforeUnmount清除定时器，防止组件卸载后定时器仍在运行导致内存泄漏。
4. 补充日期逻辑：你的模板中用到了data.date，所以添加了日期格式化的代码，可根据需求调整显示格式。

内容的提问来源于stack exchange，提问作者user20717282