Vue.js 秒表时间累加难题剖析：破解页面刷新后时间失控的谜团

javascript

2024-03-28 12:28:16

## Vue.js 秒表时间累加之谜：深入剖析背后的根源

### 前言

在使用 Vue.js 开发计时器时，常常会遇到一个令人困惑的问题：每次刷新页面后，秒表都会累加固定时间，仿佛时间在不受控制地流逝。这不禁让人好奇，这背后究竟隐藏着怎样的玄机？

### 探索问题根源

为了破解这个谜团，我们需要深入研究 Vue.js 组件的代码和背后的原理。以下是导致问题的主要因素：

1. 未初始化的计时器变量

在 Vue.js 组件中，计时器变量没有被正确初始化。当页面刷新时，计时器会重置，导致计时从头开始。

2. 时间累加

每秒都会触发一个计时器，计算从计时开始到当前时间经过的时间。当页面刷新时，计时器会重置，但计时器变量不会。因此，当计时器再次启动时，它会从上次记录的时间点继续累加，导致时间累加。

### 解决方案

要解决这个问题，我们需要对以下方面进行改进：

1. 正确初始化计时器

在 mounted 生命周期钩子中，检查 seconds 变量是否不为零。如果它不为零，则表示计时器正在运行。这时，我们应该重新启动计时器，从 startTime 开始计算。

2. 重置时间累加

在 stopTimer 方法中，除了停止计时器外，还需要将 seconds 变量重置为零。这将确保每次刷新页面时时间累加都从零开始。

### 优化代码

以下是对 Vue.js 组件代码的优化版本，解决了上述问题：

// 省略代码...

mounted() {
  if (this.seconds !== 0) {
    this.trackingTime = true;
    this.startTime = new Date(new Date().getTime() - this.seconds * 1000);  // 从上次记录的时间点开始计算
    this.timer = setInterval(() => {
      this.seconds = (new Date() - this.startTime) / 1000;
    }, 1000);
  }
}

stopTimer() {
  // 省略代码...

  window.clearTimeout(this.timer);
  this.seconds = 0;  // 重置时间累加
}