Vue3前端项目实现动态显示当前系统时间详解
作者：JosieBook
在 Vue3 项目中,动态显示当前系统时间是一个常见的需求,本文将详细介绍如何使用 Vue3 的 ref 和生命周期钩子实现一个高效、可维护的动态时间显示组件,有需要的小伙伴可以了解一下
前言
在 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 的响应式数据和生命周期钩子，可以轻松实现动态时间显示。关键点包括：
- 使用
ref管理动态数据。 - 通过
padStart补零格式化时间。 - 合理设置更新频率（如每分钟）平衡实时性和性能。
实际项目中，可进一步扩展为可配置的组件，支持多语言或自定义格式。
到此这篇关于Vue3前端项目实现动态显示当前系统时间详解的文章就介绍到这了,更多相关Vue3动态显示系统时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！