vue实现简易计时器组件

window.setTimeout(callback,delay);   //callback:回调函数 delay：时间间隔时长
window.setInterval(callback,delay);

<template>
    <div class="timer">
    <div>{{nowTime}}</div>
    </div>
</template>

<script>
    export default {
    name: 'Timer',
    data () {
     return {
      timer: null,
      nowTime:"",
      hour: 0,
      minutes: 0,
      seconds: 0
      }
    },
    created () {
    this.timer = setInterval(this.startTimer, 1000);
    },
    destroyed () {
    clearInterval(this.timer);
    },
    
    methods: {
    startTimer () {
     //建议开启定时器前，先清除定时器，避免定时器累加，出现不可预期的bug
     if(this.timer) {
   clearInterval(this.timer);
  }
     this.seconds += 1;
     if (this.seconds >= 60) {
      this.seconds = 0;
      this.minutes= this.minutes+ 1;
     }
     if (this.minutes>= 60) {
      this.minutes= 0;
      this.hour = this.hour + 1;
     }
     this.nowTime = this.toZero(this.hour): this.toZero(this.minutes):this.toZero(this.seconds)
    },
     toZero(timeNumber) {
     return timeNumber<10?"0"+timeNumber：timeNumber
   },
 }
}
</script>