Vue 简单实现实时更新日期时分秒

<template>
     <div>
         <span>{{nowtime}}</span>
         <span>{{nowdate}}</span>
     </div>
  </template>
  
  <script>
  export default {
    name: '',
    data(){
        return {
            nowdate : '', //日期
            nowtime : '', //时间
            newTimer : '', //定时器
        }
    },
    methods: {
        //获取时间
        timerOneScondRun() {
        	let date = new Date();
        	// 日期格式  2022年05月31日
	        this.nowdate =
	            date.getFullYear() +
	            "年" +
	            (date.getMonth() + 1 >= 10
	            ? date.getMonth() + 1
	            : "0" + (date.getMonth() + 1)) +
	            "月" +
	            (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate())+'日';
	        // 时间格式 12:11:27
	        this.nowtime =
	            date.getHours() +
	            ":" +
	            (date.getMinutes() >= 10
	            ? date.getMinutes()
	            : "0" + date.getMinutes()) +
	            ":" +
	            (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds());
        },
    },
    mounted () {
        this.timerOneScondRun(); //执行日期函数
        clearInterval(this.newTimer); //清除定时器
        // 定时获取时间
        this.newTimer = setInterval(this.timerOneScondRun, 1000);
    },
    beforeRouteLeave(to,from,next){
    	// 离开组件时停掉定时器，节省内存
        clearInterval(this.newTimer);
        next();
    },
  }
  </script>
  <style lang="less" scoped>

  </style>