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 データベース グリーン バージョンのインストール チュートリアル

推薦する

マークアップ言語 - リスト

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...

MySQLの大規模テーブル最適化ソリューションについての簡単な説明

背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...

Vue3.0のさまざまなリスニング方法の包括的な概要

目次リスナー1.ウォッチエフェクト2.見る1.1 聴くための最初の方法1.2 聞く2つ目の方法1.3...

Linuxでプロセスが占有するポート番号を表示する

Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...

制限およびオフセット ページング シナリオを使用すると速度が遅くなるのはなぜですか?

質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...

高速でクールな揺れアニメーション効果を実現するCSS

1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...

Vue ルーターにパラメータを渡すときにページを更新するとパラメータが失われる問題に対処する方法

目次概要方法1: params経由でパラメータを渡す方法2: クエリを通じてパラメータを渡す方法3:...

vue3 を使用してカウント関数コンポーネントのカプセル化例を実装する

目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. アイデア2. 準備2. ...

Linux で実行中のバックグラウンド プログラムを表示および終了する方法

Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...

MySQL の int(n) の後の n はどういう意味ですか?

int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...

Chrome Dev Tools を使用してページのパフォーマンスを分析する方法 (フロントエンドのパフォーマンス最適化)

背景開発やデバッグには Chrome Dev Tools がよく使用されますが、ページのパフォーマン...

Docker で ElasticSearch をデプロイする方法

1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...

WIN2008 サーバーのコマンド ラインを使用して IIS7 コンポーネントをインストールおよびアンインストールする方法

注意: .NET FrameWork はコア モードで実行できないため、コア インストール モードの...

MySQLのパスワードを忘れた場合の対処方法

MySQL パスワードを 2 回忘れてしまいましたか?最初、私はアンインストールして再インストールす...

ico ミラー コードを HTML に追加します (favicon.ico はルート ディレクトリに配置されます)

コード:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...