vue显示实时时间

<template>
  <div>
    <div class="time">{{time}}</div>
  </div>
</template>

<script>
export default {
  name: "timer",
  data() {
    return {
      //显示时间
      time:'',
      date:'',
    }
  },
  mounted() {
    this.dateShow();
  },
  created() {
    this.dateFormat();
  },
  beforeDestroy() {
  this.dataDestroy();
  },
  methods: {
    dataDestroy(){
      if (this.timer) {
        clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
      }

    },
    dateShow() {
      this.timer = setInterval(() => {
        this.dateFormat()
      }, 1000)
    },
    dateFormat() {
      this.date = new Date();
      let year = this.date.getFullYear();
      let month = this.date.getMonth() + 1 < 10 ? "0" + (this.date.getMonth() + 1) : this.date.getMonth() + 1;
      let day = this.date.getDate() < 10 ? "0" + this.date.getDate() : this.date.getDate();
      let hours = this.date.getHours() < 10 ? "0" + this.date.getHours() : this.date.getHours();
      let minutes = this.date.getMinutes() < 10 ? "0" + this.date.getMinutes() : this.date.getMinutes();
      let seconds = this.date.getSeconds() < 10 ? "0" + this.date.getSeconds() : this.date.getSeconds();
      this.time = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    },

  
  }

}

</script>