vue实现动态时间
Vue 实现动态时间的常见方法
使用 setInterval 更新数据
在 Vue 组件中，通过 data 定义时间变量，利用 setInterval 每秒更新一次时间。注意在组件销毁时清除定时器以避免内存泄漏。
<template>
<div>{{ currentTime }}</div>
</template>
<script>
export default {
data() {
return {
currentTime: new Date().toLocaleTimeString()
};
},
mounted() {
this.timer = setInterval(() => {
this.currentTime = new Date().toLocaleTimeString();
}, 1000);
},
beforeDestroy() {
clearInterval(this.timer);
}
};
</script>使用计算属性（适合低频更新）
若时间精度要求不高（如每分钟更新），可通过计算属性结合 Date 对象实现动态显示，无需手动管理定时器。
<template>
<div>{{ formattedTime }}</div>
</template>
<script>
export default {
computed: {
formattedTime() {
return new Date().toLocaleTimeString();
}
}
};
</script>使用第三方库（如 moment.js 或 day.js）
对于复杂的时间格式化需求，可引入轻量级的 day.js 库处理时间显示和时区转换。
import dayjs from 'dayjs';
export default {
data() {
return {
currentTime: dayjs().format('HH:mm:ss')
};
},
mounted() {
setInterval(() => {
this.currentTime = dayjs().format('HH:mm:ss');
}, 1000);
}
};优化性能的异步更新
通过 requestAnimationFrame 实现更平滑的时间更新，适合高频动画场景。
methods: {
updateTime() {
this.currentTime = new Date().toLocaleTimeString();
this.animationFrame = requestAnimationFrame(this.updateTime);
}
},
mounted() {
this.updateTime();
},
beforeDestroy() {
cancelAnimationFrame(this.animationFrame);
}注意事项
- 定时器需在
beforeDestroy或unmounted生命周期中清理。 - 频繁更新的时间显示可能影响页面性能，建议根据实际需求调整刷新频率。
- 服务端渲染（SSR）场景下需避免客户端特有的 API（如
window）。
