Vue組み込みコンポーネントのキープアライブの使用例

Vue組み込みコンポーネントのキープアライブの使用例

keep-alive は Vue の組み込みコンポーネントの 1 つで、主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。

効果

コンポーネントの切り替え中に状態をメモリ内に保持することで、DOM レンダリングの繰り返しを防ぎ、読み込み時間とパフォーマンスの消費を削減し、ユーザー エクスペリエンスを向上させます。

1. キープアライブの使用

<keep-alive> が動的コンポーネントをラップすると、非アクティブなコンポーネント インスタンスは破棄されるのではなくキャッシュされます。
<transition> と同様に、<keep-alive> は抽象コンポーネントです。DOM 要素自体はレンダリングされず、コンポーネントの親コンポーネント チェーンにも表示されません。

<keep-alive> 内でコンポーネントが切り替えられると、それに応じてアクティブ化および非アクティブ化されたライフサイクル フック関数が実行されます。

小道具:

include - 文字列または正規表現。名前が一致するコンポーネントのみがキャッシュされます。
exclude - 文字列または正規表現。名前が一致するコンポーネントはキャッシュされません。
max: 数値。キャッシュできるコンポーネント インスタンスの最大数。

  • 含める & 除外する

一部のコンポーネントの状態のみをキャッシュする場合は、include プロパティを使用できます。

一部のコンポーネントを除外して他のコンポーネントをキャッシュする場合は、exclude 属性を使用します。

  • 最大

キャッシュできるコンポーネント インスタンスの最大数。この数に達すると、最も長い時間アクセスされていないキャッシュされたコンポーネント インスタンスは、新しいインスタンスが作成される前に破棄されます。

<キープアライブ:max="10">
  <コンポーネント :is="view"></コンポーネント>
</キープアライブ>

使用例:

1. すべてのページをキャッシュする:

<キープアライブ>
    <ルータービュー></ルータービュー>
    <!-- キャッシュされるコンポーネントは次のとおりです -->
</キープアライブ>

2. 条件に基づいて一部のページをキャッシュする

(詳しい使い方は公式サイトのAPIをご覧ください)

<テンプレート>
  <div id="アプリ">
  	// 1. newsList または productList という名前のコンポーネントをキャッシュします <keep-alive include='newsList,productList'>
         <ルータービュー/>
      </キープアライブ>
	
	// 2. test という名前のコンポーネントはキャッシュされません <keep-alive exclude='test'>
  	  <ルータービュー/>
	</キープアライブ>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

知らせ:

もう 1 つの手順があります。状態をキャッシュする必要があるコンポーネントのスクリプト セクションのコンポーネントに name 属性を追加する必要があります。 キープアライブ キャッシュ コンポーネントを使用しない場合は、name 属性を記述する必要はありません。ただし、キープアライブを使用してコンポーネントの状態をキャッシュする場合は、このコンポーネントにこのプロパティが必要です。また、この属性の値は、大文字と小文字を含めて、タグ内の include 属性の値とまったく同じである必要があります。 productList.vueコンポーネントを例に挙げます

<テンプレート>
    <!-- productList コンポーネントの HTML 構造は次のとおりです -->
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    name: "productList", // キープアライブを使用してコンポーネントのステータスをキャッシュする場合、このコンポーネントにはこの属性が必要です。
    データ(){
        戻る {}
    }
</スクリプト>

3. vue-routerを組み合わせてページをキャッシュする

デフォルトの新しいルーターをエクスポートします({
  モード: '履歴'、
  ルート: [
    {
      パス: '/'、
      名前: 'ホーム',
      コンポーネント: ホーム、
      子供たち: [
        {
          パス: '製品',
          名前: '製品'、
          コンポーネント: 製品、
          メタ: {
        	keepAlive: true // キャッシュが必要 }
        },
        {
          パス: 'newsDetails',
          名前: 'newsDetails',
          コンポーネント: newsDetails、
          メタ: {
        	keepAlive: false // キャッシュは不要 }
        }
      ]
    }
  ]
})

App.vueで

<テンプレート>
  <div id="アプリ">
    <キープアライブ>
      <ルータービュー v-if="$route.meta.keepAlive"></ルータービュー>
    </キープアライブ>
    <ルータービュー v-if="!$route.meta.keepAlive"></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'アプリ'
}
</スクリプト>

2. キープアライブライフサイクル

keep-alive で作成されたコンポーネントには、activated と deactivated という 2 つのライフサイクル フックが追加されます。

1. アクティブ化

キープアライブ コンポーネントがアクティブ化されたときに呼び出されます。

これは、コンポーネントが初めてレンダリングされるときに呼び出され、その後、キャッシュされたコンポーネントがアクティブ化されるたびに呼び出されます。

マウント後、キャッシュされたルート/コンポーネントに初めて入ると、コールバック関数が次に渡される前に、beforeRouteEnter ガードが呼び出されます。

ページに初めてアクセスすると、フックのトリガーの順序は作成->マウント->アクティブ化です。

コンポーネントはキャッシュされているため、キャッシュ ルート/コンポーネントに再度入ったときにこれらのフックはトリガーされません。

beforeCreate の作成と beforeMount のマウントはトリガーされません。

2. 無効化

キープアライブ コンポーネントが非アクティブ化されたとき (ルートを離れたとき) に呼び出されます。

keep-alive が使用されている場合、コンポーネントは破棄されずにキャッシュされるため、beforeDestroy (コンポーネント破棄前のフック) と destroyed (コンポーネント破棄) は呼び出されません。

このフックは beforeDestroy の代わりとして考えることができます。コンポーネントをキャッシュし、コンポーネントが破棄されたときに何かを実行したい場合は、このフックにそれを配置できます。

知らせ:

1. キープアライブを使用すると、データがメモリ上に保持されます。ページに入るたびに最新のデータを取得したい場合は、アクティブ化された段階でデータを取得し、元の作成フック関数でデータを取得するタスクを引き受ける必要があります。

2. これら 2 つのライフサイクル関数は、コンポーネントが keep-alive でラップされている場合にのみ呼び出されます。通常のコンポーネントとして使用される場合、これらは呼び出されません。バージョン 2.1.0 以降では、exclude を使用した後、keep-alive でラップされていても、これら 2 つのフック関数は呼び出されません。

3. 上記の 2 つのフック関数は、サーバー側レンダリング中には呼び出されません。

公式ドキュメントを参照してください: cn.vuejs.org/v2/api/#kee…

上記は、Vue の組み込みコンポーネント keep-alive の詳細な使用例です。Vue の組み込みコンポーネント keep-alive の詳細については、123WORDPRESS.COM の他の関連記事にも注目してください。

以下もご興味があるかもしれません:
  • Vue3の組み込みコンポーネントであるTeleportの使い方を詳しく説明します
  • Vue 組み込みコンポーネントのキープアライブでの LRU アルゴリズムの使用
  • vue.js組み込みコンポーネントのキープアライブコンポーネントの使用
  • Vue の新しい組み込みコンポーネントの使用方法の詳細な説明

<<:  独自の YUM リポジトリを作成する手順

>>:  システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル

推薦する

MySQL での and or クエリの優先度分析

これは見落とされがちな問題かもしれません。まず、次の点を明確にする必要があります。 MySQL では...

CentOS 8.0.1905 は ZABBIX 4.4 バージョンをインストールします (検証済み)

Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...

mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...

Ubuntu 18.04 向け VMware Tools のインストールと構成のチュートリアル

この記事では、Ubuntu 18.04でのVMware Toolsのインストールと設定について記録し...

Dockerコンテナ監視の原理とcAdvisorのインストールおよび使用方法

本番環境におけるコンテナの稼働状況を監視することは非常に重要です。監視を通じて、コンテナの稼働状況を...

MySQLのスレッド実行の急増とクエリの遅延の問題を解決する

目次背景問題の説明原因分析CPUクエリが遅い接続数分析する拡大する総括する背景新年を迎える前は、一年...

音楽プレーヤーアプリ(アプリケーションソフトウェア)の分析と再設計 美しい音楽プレーヤーインターフェースの設計方法

無線インタラクションにずっと興味があったので、今回は実践してみようと思います〜この分析と評価は iO...

MySQLのunion allとunionの違いを簡単に理解する

Union は、重複行を除外し、デフォルトのソートを実行する、データに対する結合操作です。Union...

HTMLで特殊記号を表示する(特殊文字対応表付き)

問題の再現HTML を使用して編集する場合、特殊記号によってエラーが表示されることが多く、極端な場合...

vue3とvue2の利点の比較

目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...

JavaScript での AOP プログラミングの基本実装

AOP の紹介AOP (アスペクト指向プログラミング) の主な機能は、コアビジネスロジックモジュール...

BFCとは何ですか? CSS 疑似要素を使用してフロートをクリアする方法

BFCコンセプト:ブロック フォーマット コンテキストは、BFC 内の要素を外部の要素から分離する独...

HTMLの最適化によりWebページの速度が向上

明らかな HTML、隠された「公開スクリプト」 Web ページのダウンロード時間を短縮する鍵は、フ...

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...