Vueでタイマーをエレガントにクリアする方法

序文

タイマーをクリアします。次のように書く人も多いと思います。

エクスポートデフォルト{
  データ（） {
    戻る
      タイマー: null
    }
  },
  
  マウント() {
    this.timer = setInterval(() => {
      コンソールログ('setInterval')
    }, 2000)
  },
  
  破棄する前に() {
    クリア間隔(this.timer)
  }
}

これは一般的なコードです。少なくとも私の友人の何人か (1 ～ 3 年の経験を持つ) は、このように書いています。ここには 3 つの不適切な問題があります。

clearInterval 後、タイマーはクリアされず、null になります。
タイマーを開始およびクリアするコードが 2 か所に分散されているため、可読性や保守性が損なわれています。You Dada 氏の言葉を借りれば、構築したものをプログラムでクリーンアップすることが難しくなります。
タイマーはデータ内に定義されています。実際、タイマーは応答操作を必要としません。データ内に定義する必要はないため、パフォーマンスの無駄が発生します。

最適化

コード上で直接:

エクスポートデフォルト{
  データ（） {
    戻る
    }
  },
  
  マウント() {
    タイマーをsetInterval(() => {
      コンソールログ('setInterval')
    }, 2000)
    this.$once('hook:beforeDestroy', () => {
      クリアインターバル(タイマー)
      タイマー = null
    })
  }
}

ここでは、フックを使用して beforeDestroy ライフサイクルを監視するため、タイマーはライフサイクル内でのみ定義すればよく、上記の問題はすべて解決されます。

派生的な質問: beforeDestroy はトリガーされませんか?

バックエンドシステムでは、ページキャッシュを設定することがよくあります。ルートがキープアライブによってキャッシュされている場合、beforeDestroyライフサイクルは実行されません。そのため、beforeDestroyでタイマーをクリアするだけで十分だと考え、実際にタイマーがクリアされていないかどうかを確認さえしない人もいます。アクティブ化されたフックと非アクティブ化されたフックの助けを借りれば、理由を知ることは簡単に解決できます。

エクスポートデフォルト{
  データ（） {
    戻る
    }
  },
  
  マウント() {
    タイマーをsetInterval(() => {
      コンソールログ('setInterval')
    }, 2000)
    this.$on('hook:activated', () => {
      if (timer === null) { // タイマーの繰り返し起動を避ける timer = setInterval(() => {
          コンソールログ('setInterval')
        }, 2000)
      }
    })
    this.$on('hook:deactivated', () => {
      クリアインターバル(タイマー)
      タイマー = null
    })
  }
}

ここで注意すべき点は、キャッシュの理由により、$once ではなく $on を使用する必要があるということです。そうしないと、一度実行された後は再度トリガーされません。

Vue でタイマーをエレガントにクリアする方法についての記事はこれで終わりです。Vue のタイマークリアに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: