Console.log가 Vue js watchcher에서 두 번 호출됨

Console.log가 Vue js watchcher에서 두 번 호출됨

저는 퀴즈 타이머를 만들려고 합니다.타이머는 API 출력(초단위)에서 취득됩니다.API 결과를 저장하기 위해 Vuex를 사용하고 있습니다.게터를 사용하여 타이머 컴포넌트에 저장된 타이머를 가져옵니다.타이머 값이 초단위로 취득되면 계산된 속성 내에서 타이머 값을 hrs, min 및 sec로 변환하고 타이머를 1초 줄이려고 합니다.어떻게든 워처 속성을 사용하여 타이머를 줄일 수 있었습니다만, 문제는 타이머가 -1이 아니라 -2가 감소하는 것입니다.워처 내에서 console.log를 실행하면 console.log가 두 번 호출되는 것을 알 수 있습니다.1회 타이머의 미정의 값을 지정하고 1회 타이머의 실제 값을 지정합니다.나는 Vuejs에 처음 와서 제대로 하고 있는지 모르겠다.이 문제를 해결할 수 있도록 도와주시고 잘못된 부분을 수정해 주시기 바랍니다.지금까지 써보려고 했던 코드를 첨부합니다.

고마워요.

const Timer = Vue.component('Timer', {
  template: `
    <div class="navbar-nav ml-auto" v-if="time_left">
     {{hour}} : {{min}} : {{sec}}
    </div>
  `,
  computed: {
    ...Vuex.mapGetters([
        'time_left'
      ]),
    hour(){
      let h = Math.floor(this.time_left / 3600)
      return h > 9 ? h : '0' + h;
    },
    min(){
      let m = Math.floor(this.time_left % 3600 / 60);
      return m > 9 ? m :'0' + m
    },
    sec(){
      let s = Math.floor(this.time_left % 3600 % 60);
      return s > 9 ? s : '0' + s
    }
  },
  watch: {
    time_left: {
      immediate: true,
      handler (newVal) {
        const timer = this.time_left
        setInterval(() => {
          // this.$store.commit('UPDATE_QUIZ_TIMER', this.time_left)
          console.log(this.time_left)
        }, 1000)
      }
    }
  }
})

당신은 잘못한 게 없어요.워처는 속성이 처음 정의될 때 한 번 실행됩니다.undefined값이 할당되면 두 번 실행됩니다.시험:

 watch: {
    time_left: {
      immediate: true,
      handler (newVal) {
        if(newVal !== undefined){
          const timer = this.time_left
          setInterval(() => {
            // this.$store.commit('UPDATE_QUIZ_TIMER', this.time_left)
            console.log(this.time_left)
          }, 1000)
        }
      }
    }
  }

언급URL : https://stackoverflow.com/questions/60135644/console-log-getting-called-twice-in-vue-js-watcher