Vue3 实时显示时间

记录一下代码，方便以后使用

参考的文章链接

• 做了以下修改
  1. 修改了formateDate方法中传入参数这个不合理的地方
  2. 给定时器增加了间隔时间
  3. 增加了取消定时器的方法

<!-- template中的代码 -->
<span>当前时间：{{ nowTime }}</span>

// script 中的代码
import { ref, onMounted, onBeforeUnmount } from 'vue'
/**
 * 显示实时时间
 */

const nowTime = ref('')
/**
 * 将小于10的数字前面补0
 * @function
 * @param {number} value
 * @returns {string} 返回补0后的字符串
 */
const complement = (value: number): string => {
    return value < 10 ? `0${value}` : value.toString()
}
/**
 * 格式化时间为XXXX年XX月XX日XX时XX分XX秒
 * @function
 * @returns {string} 返回格式化后的时间
 */
const formateDate = () => {
    const time = new Date()
    const year = time.getFullYear()
    const month = complement(time.getMonth() + 1)
    const day = complement(time.getDate())
    const hour = complement(time.getHours())
    const minute = complement(time.getMinutes())
    const second = complement(time.getSeconds())
    const week = '星期' + '日一二三四五六'.charAt(time.getDay());
    return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`
}
let timer = 0
/**
 * 设置定时器
 */
onMounted(() => {
    timer = setInterval(() => {
        nowTime.value = formateDate()
    }, 1000)
})
/**
 * 取消定时器
 */
onBeforeUnmount(() => {
    clearInterval(timer) //清除定时器
    timer = 0
})

// 结果
当前时间：2024年01月12日 21:34:48