Vueプロジェクトのタイマーの問題

タイマーを開いたまま閉じない場合、タイマーは引き続き実行されることは誰もが知っていることですが、これは次の図に示すように、非常にパフォーマンスを消費します。 解決策 1: これは、私たちが通常使用する方法でもあり

ます
。
まず、データ関数でタイマー名を定義します。

 data() {
    
    
    return {
    
    
      timer: null,
    };
  },

次に、次のようにタイマーを使用します。

 this.timer = setInterval(() => {
    
    
      console.log(1);
    }, 100);

最後に beforeDestroy() ライフサイクルでタイマーをクリアします。

 beforeDestroy() {
    
    
    clearInterval(this.timer);
  },

このように書くのはまったく問題ありませんが、ページ内で多数のタイマーを使用する場合、少し行き詰まることがあります。これは、データ内の変数 timer がコンポーネント インスタンス el に格納されており、できればライフサイクルのみがアクセスできるためです。できればそれを。
また、たくさん書くと、beforeDestroyのライフサイクルは次のようになります。

解決策 2:
この方法は、タイマーが定義された後、$once イベント リスナーの位置を通じてタイマーをクリアします。完全なコードは次のとおりです。

const timer = setInterval(() =>{
    
                        
    // 某些定时器操作                
}, 100);            
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
    
                
    clearInterval(timer);                                    
})

現在のページで使用する必要があり、終了後に破棄する必要がある他のコンポーネント (一部のサードパーティ ライブラリのコンポーネントなど) と同様に、このメソッドは、ページを終了した後にバックグラウンドで実行される問題を解決するために使用できます。出発します。
一般に、コードをより読みやすく、一目で明確にするために、オプション 2を使用することをお勧めします。