vue での keep-alive の動作原理と使用方法の詳細な説明-Vue.js-php.cn

vue での keep-alive の動作原理と使用方法の詳細な説明

王林

リリース： 2023-07-21 11:58:53

オリジナル

2343 人が閲覧しました

Vue.js は、パフォーマンスを最適化し、開発効率を向上させるための便利な機能を提供する、人気のあるフロントエンドフレームワークです。これらの機能の 1 つは keep-alive です。これはコンポーネント間の状態を保持するのに役立ち、それによって不必要なレンダリングとリクエストを削減します。この記事では、keep-alive の仕組みと使用方法を詳しく紹介し、いくつかのコード例を示します。

1. `keep-alive` の仕組み

Vue.js では、コンポーネントを切り替えるたびに、コンポーネントが再作成されてレンダリングされます。これは、コンポーネントを切り替えるたびに、コンポーネントの状態がリセットされ、データを再ロードする必要があることを意味します。一部の比較的安定したコンポーネントでは、この動作によりパフォーマンスが不必要に浪費される可能性があります。

そして keep-alive コンポーネントの役割は、コンポーネントを破棄して再作成するのではなく、状態を保持する必要があるコンポーネントをキャッシュすることです。こうすることで、コンポーネントを切り替えるときに、コンポーネントがすでにキャッシュされている場合、データを再ロードしてレンダリングする代わりに、キャッシュから状態を直接読み取ります。

keep-alive は次のように機能します:

コンポーネントが初めてロードされると、コンポーネントインスタンスがキャッシュされ、コンポーネントの vm. $el (コンポーネントインスタンスのルート DOM 要素) が DOM ツリーから削除されます。
別のコンポーネントに切り替えると、元のコンポーネントの vm.$el が _inactive という名前の配列に入れられて保存されます。
元のコンポーネントに再び切り替えると、元のコンポーネントの vm.$el が _inactive 配列から取得され、DOM に再挿入されます。木。

コンポーネントはキャッシュされるため、コンポーネントのライフサイクルフック関数 (created、mounted など) は、初めてロードされました切り替え時に 1 回トリガされ、その後の切り替え中に再度トリガされることはありません。

2. `keep-alive の使用方法`

Vue.js では、<keep-alive> コンポーネントを使用してラップできます。キャッシュする必要があるコンポーネント。一般的な使用法をいくつか示します。

単一コンポーネントをキャッシュする:

<template>
  <div>
    <keep-alive>
      <Component></Component>
    </keep-alive>
  </div>
</template>

ログイン後にコピー

この例では、<Component> コンポーネントがそのままキャッシュされます。上。別のコンポーネントに切り替えて再び戻ると、<Component> コンポーネントは状態を再作成するのではなく、キャッシュから状態を読み取ります。

複数のコンポーネントをキャッシュする:

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

ログイン後にコピー

この例では、ルーティング設定を通じてロードされたすべてのコンポーネントがキャッシュされます。ルートを切り替えるとき、すでにロードされているコンポーネントはキャッシュから状態を読み取ります。

コンポーネントの動的キャッシュ:

<template>
  <div>
    <keep-alive :include="includeComponents">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      includeComponents: ['ComponentA', 'ComponentB']
    }
  }
}
</script>

ログイン後にコピー

この例では、includeComponents 配列に含まれるコンポーネントのみがキャッシュされます。他のコンポーネントは、切り替え時に破壊され、再作成されます。

前後で状態が異なるコンポーネントをキャッシュする:

<template>
  <div>
    <keep-alive :exclude="excludeComponents">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      excludeComponents: ['ComponentA']
    }
  }
}
</script>

ログイン後にコピー

この例では、excludeComponents 配列内のコンポーネントはキャッシュされません。これは、他のコンポーネントに切り替えてから元に戻すと、除外されたコンポーネントが再作成されることを意味します。

3. 概要

keep-alive このコンポーネントは、パフォーマンスの最適化に役立つ Vue.js によって提供される関数です。これは、状態を保持する必要があるコンポーネントをキャッシュし、切り替え時に状態をキャッシュから直接ロードすることで機能し、不必要な再レンダリングやリクエストを回避します。使用方法はシンプルで、単一のコンポーネント、複数のコンポーネントをキャッシュし、キャッシュされたコンポーネントを動的に制御することもできます。

キープアライブコンポーネントを合理的に使用することで、アプリケーションのパフォーマンスを向上させ、不必要なリソースの消費を削減できます。この記事が、keep-alive の仕組みとその使用方法を理解するのに役立つことを願っています。ご質問がございましたら、お気軽にメッセージを残してご相談ください。

以上がvue での keep-alive の動作原理と使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。