Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

Vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュについて

背景:

  • コンポーネントベースの開発モデルでは、プロジェクト全体を多数のコンポーネントに分割し、それらを適切な方法で整理して、目的の効果を実現します。
  • ページは複数のコンポーネントで構成されているため、当然、コンポーネント間の切り替えの問題があります。Vue では動的コンポーネントの概念も提案されており、これによりコンポーネント間の切り替え効果をより適切に実現できます。ただし、Vue でのコンポーネントの切り替えは、実際にはコンポーネント自体の再作成と破棄のプロセスです。シナリオによっては、コンポーネントの再作成と再レンダリングを望まない場合があります。

実際のシナリオ:ユーザーは、リスト ページ --> 詳細ページ --> リスト ページの順に操作します。このとき、期待される効果は、ユーザーが詳細ページからリスト ページに戻ったときに、元のページが再レンダリングされるのではなく、変更されないままになることです。このとき、ユーザーがリスト ページから詳細ページに切り替えるときに、元のリスト ページをキャッシュする必要があります。

この記事では主にVueにおけるコンポーネントの切り替えとキャッシュソリューションについて紹介します

1. コンポーネント切り替え方式

方法1: v-ifとv-elseを使用する

// 変数フラグが true の場合、comp-a コンポーネントが表示され、そうでない場合は comp-b コンポーネントが表示されます <comp-a v-if="flag"></comp-a>

<comp-b v-else></comp-b>

方法 2: 組み込みコンポーネントを使用する: <component></component>

// クリックするとログイン、登録、終了コンポーネントが切り替わります <template>
     <div>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">ログイン</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">登録</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">ログアウト</a>
        
        // <component></component> は対応する名前のコンポーネントを表示します。これはプレースホルダーに相当します // :is 属性はコンポーネント名を指定します <component :is="comName"></component>
      </div>
    </テンプレート>

方法3: vue-router

// ルーティングルール:
  {
    パス: '/login',
    名前: 'ログイン',
    コンポーネント: () => import('../views/login.vue')
  },
  {
    パス: '/register',
    名前: 'レジスタ',
    コンポーネント: () => import('../views/register.vue')
  },
  
  //コンポーネントを表示する場所:
   <ルータービュー />

2. コンポーネントのキャッシュ: キープアライブ

この記事の冒頭の実際のシナリオのように、コンポーネントを破棄して再構築するのではなく、必要に応じてコンポーネントをキャッシュします。

1.キープアライブの定義

<keep-alive>が動的コンポーネントをラップすると、非アクティブなコンポーネント インスタンスは破棄されるのではなくキャッシュされます。

<keep-alive> は抽象コンポーネントです。DOM要素自体はレンダリングされず、親コンポーネント チェーンにも表示されません。 <keep-alive>内でコンポーネントが切り替えられると、それに応じてactivatedおよびdeactivatedライフサイクル フック関数が実行されます。

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

活性化された

keep-aliveコンポーネントがアクティブ化されたときに呼び出されます。このフック関数は、サーバー側のレンダリング中には呼び出されません。

無効化

このフックはkeep-aliveコンポーネントが無効になっているときに呼び出されます。サーバー側のレンダリング中には呼び出されません。

keep-aliveで作成されたコンポーネントには、 activateddeactivated 2つのライフサイクルフックが追加されます。
keep-aliveを使用すると、データがメモリ内に保持されます。ページに入るたびに最新のデータを取得したい場合は、アクティブ化フェーズでデータを取得し、元のcreatedフック関数でデータを取得するタスクを引き受ける必要があります。

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

キャッシュが設定されているコンポーネント:

  • 最初のエントリ: beforeRouterEnter ->created->…->activated->…->deactivated> beforeRouteLeave
  • 後続のエントリ: beforeRouterEnter ->activated->deactivated> beforeRouteLeave

3. キープアライブの使い方

1. 小道具

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

2. <component></component> で使用する

  <テンプレート>
     <div>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'login'">ログイン</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'register'">登録</a>
        <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click.prevent="comName = 'logOut'">ログアウト</a>
     
     // ログイン コンポーネントがキャッシュされます。include が設定されていない場合、<component></component> にマウントされているすべてのコンポーネントがデフォルトでキャッシュされます。// 指定された複数のコンポーネントをキャッシュします include = ['login', 'register']
      <キープアライブを含める="ログイン">
          <コンポーネント:is="comName"></コンポーネント>
      </キープアライブ>    
      </div>
    </テンプレート>

3. <router-view /> ルーティングで使用する

ルーティングmeta情報のkeepAlive属性を設定する必要があります
keep-aliveコードは v-if と組み合わせてラップすることができます。meta のkeepAlive trueの場合はキャッシュされ、そうでない場合はキャッシュされません。これにより、より柔軟になります。

 {
    パス: '/login',
    名前: 'ログイン',
    コンポーネント: () => import('../views/login.vue')
    メタ:{
        keepAlive : true // ログインコンポーネントはキャッシュされます}
  },
  {
    パス: '/register',
    名前: 'レジスタ',
    コンポーネント: () => import('../views/register.vue'),
      メタ:{
        keepAlive : false // レジスタコンポーネントはキャッシュされません}
  },

<ルータービュー />:

<div id="アプリ">
    <キープアライブ> 
    <!-- キャッシュする必要があるコンポーネントを表示します-->
        <router-view v-if="$route.meta.keepAlive"> </router-view>
    </キープアライブ>
    
    <!-- キャッシュを必要としないコンポーネントを表示します --> 
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
</div>

4. キャッシュコンポーネントをクリアする

 // beforeRouteLeave() フック // 詳細ページに移動するかどうかを決定する beforeRouteLeave(to, from, next) {
      to.path === "/goods_detail"の場合{
        メタキープアライブ = true;
      } それ以外 {
        from.meta.keepAlive = false;
        // this.$destroy()
      }
      次();
    }

これで、vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュに関するこの記事は終了です。vue コンポーネントの切り替え、動的コ​​ンポーネント、コンポーネントのキャッシュに関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue 動的コンポーネントと v-once ディレクティブの実装
  • vue.js 動的コンポーネントの詳細な説明
  • Vueは動的コンポーネントを使用してTAB切り替え効果を実現します
  • Vue3 の動的コンポーネントはどのように機能しますか?
  • Vue の動的コンポーネントと非同期コンポーネントの詳細な理解
  • Vueコンポーネントの動的コンポーネントの詳細な説明

<<:  MySQL ロール関数の紹介

>>:  ウェブ画像形式としてPNG、JPG、GIFを選択して使用する方法

推薦する

MySQL 8.0.11 Mac 用インストール ガイド

MACはmysql8.0をインストールします。具体的な内容は次のとおりです。 1. ダウンロードアド...

CentOS8 で MySQL 8.0 をインストールしてデプロイする方法

MySQL 8 の公式バージョン 8.0.11 がリリースされました。公式発表によると、MySQL ...

MYSQL メタデータ ロック (MDL ロック) MDL ロックの問題分析

1. はじめにMYSQL の MDL ロックは常に頭痛の種でした。ロックについて話すとき、通常は I...

Nginx プロキシを使用してインターネットを閲覧する方法

私は通常、Tomcatや他のアプリケーションのリバースプロキシとしてnginxを使用しています。実際...

Vueはタブを切り替えてデータの状態を維持する3つの方法を実装します

Vue でタブ切り替えを実装する 3 つの方法1. v-showはコンテンツの切り替えを制御します1...

ハイパーリンクの表示と開き方

<br />関連記事: ハイパーリンクを表示して開く方法症状<br />ユー...

vue.jsは画像のURLに従って画像をダウンロードします

最近、フロントエンドの vue.js ドッキング機能モジュールに取り組んでいたとき、画像をダウンロー...

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

HTMLで下線を設定するには?HTMLでテキストに下線を付ける方法

HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...

Vue Elementのテーブルコンポーネントをカプセル化する方法

Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...

MySQLデータベースに接続し、クエリ操作を実行するためのIDEAの完全なコード

1.まずMysqlリンク設定ページを書く パッケージ com.wretchant.fredis.me...

小規模プロジェクトで Vue が点滅するのを防ぐ方法

まとめHTML: 要素と v-cloak CSS: [v-cloak]{表示: なし}プロセスページ...

モバイルデバイス上の 1px 境界線を解決する最善の方法 (推奨)

モバイル デバイス向けに開発する場合、Retina 画面上で要素の境界線が太くなるという問題に遭遇す...

JavaScriptはパスワードボックスの検証情報を実装します

この記事では、パスワードボックスの検証情報を実装するためのJavaScriptの具体的なコードを例と...

React における ref の一般的な使用法の概要

目次Refsとは何か1. 文字列型参照2. コールバック参照React.createRef() 4....