【前端】Vue3 前端项目实现动态显示当前系统时间

---

前言

在 Vue3 项目中，动态显示当前系统时间是一个常见的需求，例如在数据看板、仪表盘或后台管理系统中展示“截止时间”或“当前时间”。本文将详细介绍如何使用 Vue3 的 ref 和生命周期钩子实现一个高效、可维护的动态时间显示组件。

---

一、实现思路

1. 核心功能需求

• 实时更新：时间应随系统时间自动更新（如每分钟刷新一次）。
• 格式化显示：时间需格式化为 YYYY年MM月DD日 HH:MM:SS 的形式，并确保个位数补零（如 08:05:09）。
• 性能优化：避免频繁更新（如每秒更新）导致不必要的渲染开销。

2. 技术选型

• Vue3 Composition API：使用 ref 管理响应式数据，onMounted 处理初始化逻辑。
• JavaScript Date 对象：获取系统时间并格式化。
• 定时器（setInterval）：控制更新频率。

---

二、代码实现

1. 模板部分（Template）

在模板中绑定动态时间数据，并通过 CSS 调整样式（如位置、颜色）：

<template><div class="app-container"><h1 class="h2size" style="top: 0%; left: 3%; color: #d1d8e0">截止时间：{{ currentDate }}</h1></div>
</template><style scoped>
/* 文字样式 */
.h2size {color: rgb(166, 202, 244);position: absolute;font-size: 1vw;font-family: 'Arial', sans-serif;
}
</style>

2. 脚本部分（Script）

使用 Vue3 的 setup 语法糖，结合 ref 和生命周期钩子实现逻辑：

<script setup>
import { ref, onMounted } from "vue";// 响应式日期变量
const currentDate = ref('');// 格式化日期函数
function formatDateshort(date) {const year = date.getFullYear();const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零const day = String(date.getDate()).padStart(2, '0');const hour = String(date.getHours()).padStart(2, '0');const minute = String(date.getMinutes()).padStart(2, '0');const second = String(date.getSeconds()).padStart(2, '0');return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
}// 组件挂载时初始化时间并设置定时器
onMounted(() => {// 初始时间currentDate.value = formatDateshort(new Date());// 每分钟更新一次时间setInterval(() => {currentDate.value = formatDateshort(new Date());}, 60000); // 60秒更新一次
});
</script>

---

三、关键点解析

1. 时间格式化

• 问题：直接使用 date.getHours() 等方法返回的是数字（如 5），需补零为 05。
• 解决方案：通过 String().padStart(2, '0') 实现个位数补零：

  const minute = String(date.getMinutes()).padStart(2, '0');
  

2. 性能优化

• 避免每秒更新：使用 setInterval 每分钟（60000ms）更新一次，减少渲染压力。
• 清理定时器：在组件卸载时（onBeforeUnmount）清除定时器（本文未展示，但实际项目中建议添加）。

3. 响应式数据

• ref 的使用：currentDate 是响应式变量，模板会自动更新当值变化时。

---

四、扩展功能

1. 自定义更新频率

可通过 props 传入更新间隔（如每秒/每分钟）：

const props = defineProps({updateInterval: { type: Number, default: 60000 }
});onMounted(() => {setInterval(() => {currentDate.value = formatDateshort(new Date());}, props.updateInterval);
});

2. 国际化支持

修改 formatDateshort 函数，支持多语言格式：

function formatDateshort(date, locale = 'zh-CN') {return date.toLocaleString(locale, {year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit',hour12: false});
}

---

五、完整代码示例

<template><div class="app-container"><h1 class="h2size">截止时间：{{ currentDate }}</h1></div>
</template><script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";const currentDate = ref('');
let timer = null;function formatDateshort(date) {const pad = num => String(num).padStart(2, '0');return `${date.getFullYear()}年${pad(date.getMonth() + 1)}月${pad(date.getDate())}日 ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
}onMounted(() => {currentDate.value = formatDateshort(new Date());timer = setInterval(() => {currentDate.value = formatDateshort(new Date());}, 60000);
});onBeforeUnmount(() => {clearInterval(timer); // 清理定时器
});
</script><style scoped>
.h2size {color: rgb(166, 202, 244);position: absolute;font-size: 1vw;font-family: 'Arial', sans-serif;
}
</style>

---

六、效果

总结

通过 Vue3 的响应式数据和生命周期钩子，可以轻松实现动态时间显示。关键点包括：

1. 使用 ref 管理动态数据。
2. 通过 padStart 补零格式化时间。
3. 合理设置更新频率（如每分钟）平衡实时性和性能。

实际项目中，可进一步扩展为可配置的组件，支持多语言或自定义格式。