Console.log 在 Vue js watcher 中被调用两次

Posted 2023-02-23

【中文标题】Console.log 在 Vue js watcher 中被调用两次

【英文标题】：Console.log getting called twice in Vue js watcher

【发布时间】：2020-05-24 21:36:32

【问题描述】：

我正在尝试为测验创建一个计时器。计时器是从 API 输出中获得的，以秒为单位。我正在使用 Vuex 来存储 API 的结果。以及使用 getter 来获取 Timer 组件中存储的计时器。一旦我以秒为单位获得计时器值，我将其转换为计算属性中的小时、分钟和秒，然后我尝试将计时器减少 1 秒。不知何故，我设法使用 watcher 属性减少了计时器，但问题是计时器没有减少-1，而是减少了-2。当我在观察者中使用 console.log 时，我注意到 console.log 被调用了两次。一次是未定义的计时器值，一次是实际的计时器值。我不知道我是否以正确的方式做这件事，因为我是 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)
      
    
  
)

【参考方案1】：

你没有做错任何事。首次使用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)