Vue项目实现每秒更新时间时出现'now' is not defined错误求助

报错原因 #

• 在updateTime()方法中，你给this.now赋值了新的Date实例，但后续调用now.getHours()时，这里的now是未定义的变量。now只在data()函数的局部作用域中存在，组件方法里无法直接访问这个局部变量，必须通过this.now来访问实例上的响应式数据。

修复后的完整代码 #

<script>
export default {
  data() {
    const now = new Date();
    return {
      now,
      hours: now.getHours(),
      minutes: now.getMinutes(),
      seconds: now.getSeconds(),
    };
  },
  methods: {
    updateTime() {
      this.now = new Date();
      // 改为通过this.now访问实例上的日期对象
      this.hours = this.now.getHours();
      this.minutes = this.now.getMinutes();
      this.seconds = this.now.getSeconds();
    },
  },
  mounted() {
    // 保存定时器ID到实例属性，方便后续清除
    this.timer = setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  unmounted() {
    // 使用保存的定时器ID清除定时器，避免内存泄漏
    clearInterval(this.timer);
  },
};
</script>

额外优化建议 #

• 移除未使用的createDOMCompilerError导入，减少不必要的依赖。
• 简化data()中的变量定义，直接在return语句中赋值，让代码更简洁。
• 必须保存定时器ID并在组件卸载时清除，防止内存泄漏问题。

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