Vue3前端項目實現(xiàn)動態(tài)顯示當前系統(tǒng)時間詳解
更新時間：2025年07月17日 09:49:14 作者：JosieBook
在 Vue3 項目中,動態(tài)顯示當前系統(tǒng)時間是一個常見的需求,本文將詳細介紹如何使用 Vue3 的 ref 和生命周期鉤子實現(xiàn)一個高效、可維護的動態(tài)時間顯示組件,有需要的小伙伴可以了解一下
前言
在 Vue3 項目中，動態(tài)顯示當前系統(tǒng)時間是一個常見的需求，例如在數(shù)據(jù)看板、儀表盤或后臺管理系統(tǒng)中展示“截止時間”或“當前時間”。本文將詳細介紹如何使用 Vue3 的 ref 和生命周期鉤子實現(xiàn)一個高效、可維護的動態(tài)時間顯示組件。
一、實現(xiàn)思路
1. 核心功能需求
- 實時更新：時間應隨系統(tǒng)時間自動更新（如每分鐘刷新一次）。
- 格式化顯示：時間需格式化為
YYYY年MM月DD日 HH:MM:SS的形式，并確保個位數(shù)補零（如08:05:09）。 - 性能優(yōu)化：避免頻繁更新（如每秒更新）導致不必要的渲染開銷。
2. 技術選型
- Vue3 Composition API：使用
ref管理響應式數(shù)據(jù)，onMounted處理初始化邏輯。 - JavaScript Date 對象：獲取系統(tǒng)時間并格式化。
- 定時器（setInterval）：控制更新頻率。
二、代碼實現(xiàn)
1. 模板部分（Template）
在模板中綁定動態(tài)時間數(shù)據(jù)，并通過 CSS 調(diào)整樣式（如位置、顏色）：
<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 語法糖，結(jié)合 ref 和生命周期鉤子實現(xiàn)邏輯：
<script setup>
import { ref, onMounted } from "vue";
// 響應式日期變量
const currentDate = ref('');
// 格式化日期函數(shù)
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() 等方法返回的是數(shù)字（如 5），需補零為 05。
解決方案：通過 String().padStart(2, '0') 實現(xiàn)個位數(shù)補零：
const minute = String(date.getMinutes()).padStart(2, '0');
2. 性能優(yōu)化
避免每秒更新：使用 setInterval 每分鐘（60000ms）更新一次，減少渲染壓力。
清理定時器：在組件卸載時（onBeforeUnmount）清除定時器（本文未展示，但實際項目中建議添加）。
3. 響應式數(shù)據(jù)
ref 的使用：currentDate 是響應式變量，模板會自動更新當值變化時。
四、擴展功能
1. 自定義更新頻率
可通過 props 傳入更新間隔（如每秒/每分鐘）：
const props = defineProps({
updateInterval: { type: Number, default: 60000 }
});
onMounted(() => {
setInterval(() => {
currentDate.value = formatDateshort(new Date());
}, props.updateInterval);
});
2. 國際化支持
修改 formatDateshort 函數(shù)，支持多語言格式：
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>
六、效果
總結(jié)
通過 Vue3 的響應式數(shù)據(jù)和生命周期鉤子，可以輕松實現(xiàn)動態(tài)時間顯示。關鍵點包括：
- 使用
ref管理動態(tài)數(shù)據(jù)。 - 通過
padStart補零格式化時間。 - 合理設置更新頻率（如每分鐘）平衡實時性和性能。
實際項目中，可進一步擴展為可配置的組件，支持多語言或自定義格式。
到此這篇關于Vue3前端項目實現(xiàn)動態(tài)顯示當前系統(tǒng)時間詳解的文章就介紹到這了,更多相關Vue3動態(tài)顯示系統(tǒng)時間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了vite+vue3使用@路徑報錯處理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-11-11
vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案
這篇文章主要介紹了vue?+?ele?實現(xiàn)下拉選擇框和下拉多選選擇框處理方案,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08
Vue2使用vue-video-player實現(xiàn)斷點續(xù)傳功能
斷點續(xù)傳是指在文件傳輸過程中,如果傳輸被中斷或者發(fā)生錯誤,可以從上一次中斷的地方繼續(xù)傳輸,而不是從頭開始,這對于大文件的傳輸尤為重要,本文給大家介紹了Vue2使用vue-video-player實現(xiàn)斷點續(xù)傳功能,需要的朋友可以參考下2025-07-07
用Vue.js方法創(chuàng)建模板并使用多個模板合成
在本篇文章中小編給大家分享了關于如何使用Vue.js方法創(chuàng)建模板并使用多個模板合成的相關知識點內(nèi)容，需要的朋友們學習下。2019-06-06
vue-quill-editor插入圖片路徑太長問題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長問題解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
這篇文章介紹了VUE中v-if與v-show的區(qū)別，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
下面小編就為大家分享一篇vue.js,ajax渲染頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue.extend,mixins和vue.component的區(qū)別及說明
Vue.extend 創(chuàng)建Vue的子類,可視為組件構造函數(shù),Vue.mixin 允許全局添加方法或?qū)傩?方便所有組件使用,Vue.component 是插件注冊方法,通過Vue.extend創(chuàng)建的組件實例可以注冊到Vue全局,使其在任何組件中可用2024-09-09
文章介紹了如何使用Vue進行項目打包,并部署到Linux服務器上,包括配置vue.config.js文件、創(chuàng)建config.js文件以更改請求地址、封裝axios請求、打包命令、部署到服務器、配置nginx以及隱藏后臺服務地址的方法2026-02-02
這篇文章主要為大家介紹了Vue實例初始化為渲染函數(shù)設置檢查源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08