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

文章目录

- 前言
- 一、实现思路
- - [1. 核心功能需求](#1. 核心功能需求)
  - [2. 技术选型](#2. 技术选型)
- 二、代码实现
- - [1. 模板部分（Template）](#1. 模板部分（Template）)
  - [2. 脚本部分（Script）](#2. 脚本部分（Script）)
- 三、关键点解析
- - [1. 时间格式化](#1. 时间格式化)
  - [2. 性能优化](#2. 性能优化)
  - [3. 响应式数据](#3. 响应式数据)
- 四、扩展功能
- - [1. 自定义更新频率](#1. 自定义更新频率)
  - [2. 国际化支持](#2. 国际化支持)
- 五、完整代码示例
- 六、效果
- 总结

前言

在 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 调整样式（如位置、颜色）：

html 复制代码

<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 和生命周期钩子实现逻辑：

javascript 复制代码

<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') 实现个位数补零：
javascript 复制代码
```
const minute = String(date.getMinutes()).padStart(2, '0');
```

2. 性能优化

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

3. 响应式数据

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

四、扩展功能

1. 自定义更新频率

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

javascript 复制代码

const props = defineProps({
  updateInterval: { type: Number, default: 60000 }
});

onMounted(() => {
  setInterval(() => {
    currentDate.value = formatDateshort(new Date());
  }, props.updateInterval);
});

2. 国际化支持

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

javascript 复制代码

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
  });
}

五、完整代码示例

html 复制代码

<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 补零格式化时间。
合理设置更新频率（如每分钟）平衡实时性和性能。

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