首页使用定时器setTimeout（setInterval）展示实时时间以及清除定时器问题

1、需求：在首页展示实时时间点儿，离开首页清除定时器，刚开始的做法：

父组件：
home.vue
<page-head ref="pageHead" />
activated() {
  this.$nextTick(() => {
    this.$refs.pageHead.startTime();
  })
},
子组件
pageHead.vue
<div class="weather">
  <span>{{ timeDate }}</span>
  <span>{{ timeDay }}</span>
  <span>{{ hourTime }}</span>
</div>
startTime() {
  var today = new Date();
  var yyyy = today.getFullYear();
  var MM = today.getMonth() + 1;
  var dd = today.getDate();
  var hh = today.getHours();
  var mm = today.getMinutes();
  // 补零
  MM = this.checkTime(MM);
  dd = this.checkTime(dd);
  mm = this.checkTime(mm);
  hh = this.checkTime(hh);
  var day; //用于保存星期（getDay()方法得到星期编号）
  if (today.getDay() == 0) day = "星期日 ";
  if (today.getDay() == 1) day = "星期一 ";
  if (today.getDay() == 2) day = "星期二 ";
  if (today.getDay() == 3) day = "星期三 ";
  if (today.getDay() == 4) day = "星期四 ";
  if (today.getDay() == 5) day = "星期五 ";
  if (today.getDay() == 6) day = "星期六 ";
  this.timeDate = yyyy + "." + MM + '.' + dd;
  this.timeDay = day;
  this.hourTime = hh + ':' + mm
  clearTimeout(this.timer) 
  this.timer = setTimeout(() => {
    this.startTime()
  }, 1000); //每一秒中重新加载startTime()方法
  // this.$once('hook:beforeDestroy',()=>{
  //   clearTimeout(this.timer);
  //   this.timer = null;
  // })
},

2、这样是可以正常渲染以及展示的，但是问题清除不了定时器，尝试过以下方法：

子组件：
pageHead.vue
startTime() {
  var today = new Date();
  var yyyy = today.getFullYear();
  var MM = today.getMonth() + 1;
  var dd = today.getDate();
  var hh = today.getHours();
  var mm = today.getMinutes();
  // 补零
  MM = this.checkTime(MM);
  dd = this.checkTime(dd);
  mm = this.checkTime(mm);
  hh = this.checkTime(hh);
  var day; //用于保存星期（getDay()方法得到星期编号）
  if (today.getDay() == 0) day = "星期日 ";
  if (today.getDay() == 1) day = "星期一 ";
  if (today.getDay() == 2) day = "星期二 ";
  if (today.getDay() == 3) day = "星期三 ";
  if (today.getDay() == 4) day = "星期四 ";
  if (today.getDay() == 5) day = "星期五 ";
  if (today.getDay() == 6) day = "星期六 ";
  this.timeDate = yyyy + "." + MM + '.' + dd;
  this.timeDay = day;
  this.hourTime = hh + ':' + mm
  clearTimeout(this.timer) 
  this.timer = setTimeout(() => {
    this.startTime()
  }, 1000); //每一秒中重新加载startTime()方法
  // 第一种：
  this.$once('hook:beforeDestroy',()=>{
  clearTimeout(this.timer);
  this.timer = null;
  })
},
第二种：
beforeDestroy() {
  console.log('触发了吗');
  clearTimeout(this.timer);
  this.timer = null;
},
第三种：
beforeRouteLeave(to, from, next) {
  console.log('触发了吗');
  clearTimeout(this.timer);
  this.timer = null;
  next()
},

3、以上三种都没效果，离开首页定时器还在触发，解决方法：不用子组件了，直接在父组件使用

父组件：
home.vue
<!-- <page-head ref="pageHead" :timeDate="timeDate" :timeDay="timeDay" :hourTime="hourTime"/> -->
<div class="pageHead">
  <div class="weather">
    <span>{{ timeDate }}</span>
    <span>{{ timeDay }}</span>
    <span>{{ hourTime }}</span>
  </div>
  <div class="enterBtn" @click="goSystem">进入管理系统</div>
</div>

// 获取当前时间点儿
startTime() {
  var today = new Date();
  var yyyy = today.getFullYear();
  var MM = today.getMonth() + 1;
  var dd = today.getDate();
  var hh = today.getHours();
  var mm = today.getMinutes();
  // 补零
  MM = this.checkTime(MM);
  dd = this.checkTime(dd);
  mm = this.checkTime(mm);
  hh = this.checkTime(hh);
  var day; //用于保存星期（getDay()方法得到星期编号）
  if (today.getDay() == 0) day = "星期日 ";
  if (today.getDay() == 1) day = "星期一 ";
  if (today.getDay() == 2) day = "星期二 ";
  if (today.getDay() == 3) day = "星期三 ";
  if (today.getDay() == 4) day = "星期四 ";
  if (today.getDay() == 5) day = "星期五 ";
  if (today.getDay() == 6) day = "星期六 ";
  this.timeDate = yyyy + "." + MM + '.' + dd;
  this.timeDay = day;
  this.hourTime = hh + ':' + mm
},
// 补零
checkTime(i) {
  if (i < 10) {
    i = "0" + i;
  }
  return i;
},
activated() {
  this.$nextTick(() => {
    this.startTime();
    this.timer = setInterval(() => {
      this.startTime()
    }, 1000);
  })
},
deactivated() {
  clearInterval(this.timer);
  this.timer = null;
}

4、解决：改为使用永久定时器setInterval，在触发定时器前调用一次方法，还有：在setInterval方法里调用startTime记得加上括号，离开组件清除定时器！

冬天来了，春天还会远吗？