Vue.js实时时钟组件无法刷新值问题排查求助

Hey Matthias, let's break down the issues with your code and get that clock ticking properly!

1. Your interval cleanup isn't working (memory leak risk) #

Right now, you call setInterval but don't save its returned ID to this.polling. That means when your component gets destroyed, clearInterval(this.polling) does nothing—your timer will keep running in the background, wasting memory and potentially causing unexpected behavior.

2. You're not updating reactive data (so the view never refreshes) #

Your time() method calculates the current time and returns it, but in Vue (I’m assuming this is a Vue component from the syntax), the view only updates when reactive data properties change. Just returning a value from a method won’t trigger a re-render—you need to store the time in a data property and update that instead.

Fixed Code Example #

First, add a reactive property to your component’s data:

data() {
  return {
    currentTime: '',
    realtime: true, // assuming this is defined in your component
    value: '' // your existing value property
  }
}

Then update your methods and lifecycle hooks:

methods: {
  zeroPadding(num) {
    // Assuming this method adds leading zeros to single-digit numbers
    return num.toString().padStart(2, '0');
  },
  updateTime() { 
    let now = new Date(); 
    let hour = this.zeroPadding(now.getHours()); 
    let minute = this.zeroPadding(now.getMinutes()); 
    let second = this.zeroPadding(now.getSeconds()); 
    console.log(`${hour}${minute}${second}`);
    
    if (!this.realtime) {
      this.currentTime = this.value;
    } else {
      this.currentTime = `${hour}:${minute}:${second}`;
    }
  }
},
mounted() { 
  // Initialize the time immediately so it shows up on load
  this.updateTime();
  // Save the interval ID to enable proper cleanup
  this.polling = setInterval(() => { this.updateTime() }, 1000); 
},
beforeDestroy () { 
  // Now this actually clears the interval when the component is removed
  clearInterval(this.polling); 
}

Finally, use the reactive currentTime property in your template:

<div>{{ currentTime }}</div>

Why This Works #

• Storing the interval ID in this.polling ensures we can properly shut down the timer when the component is destroyed, preventing memory leaks.
• Updating this.currentTime (a reactive data property) signals Vue to re-render the view with the latest time value every second.

内容的提问来源于stack exchange，提问作者doerflia