vueの外部コンポーネントを閉じる方法

Vue.js は、さまざまな機能を組み合わせて再利用可能なコンポーネントを簡単に構築できる先進的なフレームワークです。共通 Vue コンポーネントは通常、何らかの対話中に開かれますが、特定の条件下では閉じる必要がある場合もあります。この記事では、メモリ リークを回避し、アプリケーションのパフォーマンスを向上させるために、Vue のコンポーネント外のイベント リスニング、タイマー、Ajax リクエスト、その他のリソースをオフにする方法を紹介します。

1. イベント リスニング

コンポーネントが読み込まれると、対話中にさまざまなユーザー操作に応答できるように、多くの場合イベント リスナーが追加されます。これらのイベント リスナーが時間内に閉じられないと、メモリ リークが発生し、アプリケーションの速度が低下し、最終的にはクラッシュします。

解決策: コンポーネントを破棄する前に、コンポーネントのすべてのイベント リスナーを削除する必要があります。コンポーネントの beforeDestroy フック関数で次の操作を実行できます。

beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
  element.removeEventListener('click', this.handleClick);
}

上記のコードは、コンポーネントが破棄される前にスクロール イベント リスナーとクリック イベント リスナーを削除して、メモリを占有しないようにします。

2. タイマー

タイマーは、メモリ リークを引き起こすもう 1 つの一般的な問題です。一般的なシナリオでは、コンポーネントがロードされるときにタイマーが作成されますが、コンポーネントが破棄される前にアンロードされると、タイマーは実行を続けてメモリを占有します。

解決策: コンポーネントが破棄される前に、すべてのタイマーをクリアする必要があります。コンポーネントの beforeDestroy フック関数で次の操作を実行できます。

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

上記のコードは、コンポーネントが破棄される前にすべてのタイマーをクリアして、メモリを占有しないようにします。

3. Ajax リクエスト

Ajax リクエストは、非常に一般的な非同期操作です。コンポーネントが Ajax リクエストを作成し、コンポーネントが破棄される前にリクエストを終了しない場合、リクエストはメモリを占有し続けます。

解決策: コンポーネントが破棄される前に、未処理の Ajax リクエストをすべてキャンセルする必要があります。これを実現するには、すべての Ajax リクエストを Promise にカプセル化し、axios が提供する cancelToken 関数を使用してリクエストをキャンセルします。コンポーネントが破棄されると、そのコンポーネントの下にあるすべての未処理のリクエストがキャンセルされます。

// 封装成Promise
const get = (url, data) => {
  return new Promise((resolve, reject) => {
    axios.get(url, {
      params: data,
      cancelToken: new axios.CancelToken(function(cancel) {
        // 将cancel存储在请求列表中
        requestList.push({ cancel });
      })
    })
    .then(res => {
      resolve(res.data);
    })
    .catch(err => {
      reject(err);
    });
  });
}

// 取消封装的请求
beforeDestroy() {
  // 取消所有未完成的请求
  requestList.forEach(item => item.cancel());
  // 清空取消列表
  requestList = [];
}

上記のコードは、各リクエストを Promise にカプセル化し、キャンセルできるようにリクエスト リストに保存します。コンポーネント破棄フック関数では、各リクエストの cancel 関数を呼び出して、未処理のリクエストをすべてキャンセルします。

Vue でリソースを解放することは、メモリ リークを回避するだけでなく、アプリケーションのパフォーマンスを向上させるためにも非常に重要です。コンポーネントにイベント リスナー、タイマー、または Ajax リクエストが追加されている場合は、コンポーネントを閉じるときにこれらのリソースを解放することを必ず検討してください。

以上がvueの外部コンポーネントを閉じる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。