销毁前的Vue清除间隔

如何解决销毁前的Vue清除间隔

我在一个运行良好的组件上设有倒数计时器。问题是，一旦用户离开组件页面，我希望间隔停止。我试图在beforeDestroy挂钩中清除clearInterval，但是由于某种原因，我仍然从间隔中每隔一秒钟就会收到错误，并且找不到ID为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>

解决方法

我认为该错误来自beforeCreate挂钩。在beforeCreate钩中，该组件在DOM中不可用。

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