VUE实时刷新当前时间

### Vue3 中实现实时更新显示当前时间 为了在 Vue3 项目中实现页面上实时更新并显示当前时间的功能，可以采用组合式 API 的方式。通过 `setup` 函数以及响应式的状态管理工具如 `ref` 或者 `reactive` 来创建可变的数据属性，并使用生命周期钩子函数 `onMounted` 和 `onBeforeUnmount` 控制定时器的启动与停止。 下面是一个完整的例子： ```javascript <template> <div>{{ formattedDate }}</div> <!-- 绑定到模板中的插值表达式 --> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue'; const date = ref(new Date()); // 定义一个响应式的日期对象 let timer; // 将原始的时间戳转换成更易读的形式 const formattedDate = computed(() => { const options = { year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' }; return new Intl.DateTimeFormat('zh-CN', options).format(date.value); }); function updateTime() { date.value = new Date(); // 更新时间为最新时刻 } onMounted(() => { timer = setInterval(updateTime, 1000); // 每隔一秒执行一次updateTime方法刷新时间 }); onBeforeUnmount(() => { clearInterval(timer); // 清除计时器防止内存泄漏 }); </script> ``` 此代码片段展示了如何定义组件内的逻辑，在挂载阶段设置间隔定时器以每秒钟调用一次 `updateTime()` 方法来改变 `date` 变量的内容；当组件即将卸载时，则清理掉定时器以免造成不必要的资源浪费[^2]。