Vue 清除间隔 beforeDestroy

Question

我在一个运行良好的组件上有一个倒数计时器。问题是，一旦用户离开组件的页面，我希望间隔停止。我试图在 beforeDestroy 钩子中清除Interval，但由于某种原因，我仍然从间隔中每隔一秒就会收到错误，并且它找不到 null 的 ID。这些错误仅在组件被销毁后才会发生。

<template>
  <div class="countdown">
    <img class="cover-image" src="@/assets/img/image_cover_image@2x.png" />
    <div class="countdown-container">
      <h2>Countdown to placeholder:</h2>
      <div class="counter">
        <div>
          <div id="day">0</div>
          Days
        </div>
        <div>
          <div id="hour">0</div>
          Hours
        </div>
        <div>
          <div id="minute">0</div>
          Minutes
        </div>
        <div>
          <div id="second">0</div>
          Seconds
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Countdown',
  data() {
    return {
      countDate: new Date('Jan 1, 2021 00:00:00:00').getTime(),
      counter: null,
    };
  },
  beforeCreate() {
    this.counter = setInterval(() => {
      const now = new Date().getTime();
      const gap = this.countDate - now;

      const second = 1000;
      const minute = second * 60;
      const hour = minute * 60;
      const day = hour * 24;

      let d = Math.floor(gap / day);
      let h = Math.floor((gap % day) / hour);
      let m = Math.floor((gap % hour) / minute);
      let s = Math.floor((gap % minute) / second);

      if (d <= 0 && h <= 0 && m <= 0 && s <= 0) {
        clearInterval(this.counter);
        d = 0;
        h = 0;
        m = 0;
        s = 0;
      }
      document.querySelector('#day').innerText = d;
      document.querySelector('#hour').innerText = h;
      document.querySelector('#minute').innerText = m;
      document.querySelector('#second').innerText = s;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.counter);
  },
};
</script>

Answer 1

我相信错误来自beforeCreate 钩子。在beforeCreate 钩子中，组件在 DOM 中不可用。

尝试将beforeCreate 钩子中的逻辑移动到mounted 钩子，该钩子在组件被挂载到DOM 时调用。