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

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

問題の説明(キープアライブとは何か)

  • キープアライブ 名前の通り、アクティブな状態を維持します。誰が活動を続けるのか?
  • まず、vue はコンポーネントベースのプログラミングなので、.vue ファイルはコンポーネントであることがわかっています。他のすべてと同様に、誕生から消滅までのライフサイクルがあります。同じことが Vue コンポーネントにも当てはまり、コンポーネントを作成する create、コンポーネントにデータをハングさせる mount、コンポーネントにハングされているデータを更新するための update、コンポーネント インスタンスを破棄するための destroy など、独自のライフサイクルがあります。
  • したがって、keep-alive を使用すると、コンポーネントをアクティブに保ち、destroy によって破壊されないため、常にアクティブな状態になります。コンポーネントが破棄されない場合は、コンポーネントにマウントされているデータがまだ存在するため、状態を保持できます。そのため、keep-alive はコンポーネントの状態を維持できます。

また、httpプロトコルのリクエストヘッダーには、http呼び出しを維持するためのキープアライブがあります。次のようにします。接続:キープアライブ機能は異なりますが、考え方は同じです。つまり、状態をアクティブに保ちます。

キープアライブの効果を確認するための小さなデモ

デモは上部のルーティング ナビゲーション部分と下部のコンテンツ領域部分に分かれています。上のルート ナビゲーションをクリックすると、ルート ビューに対応するルート コンポーネントが表示されます。効果図は以下のとおりです。

キープアライブなしの効果図

対応するコード

// <template> 内の #App.vue
  <div class="box">
    <!-- ルートナビゲーション-->
    <div class="nav">
      <router-link to="/">ホームページへ移動</router-link>
      <router-link to="/about">about ページへ移動</router-link>
      <router-link to="/detail">詳細ページへ移動</router-link>
    </div>
    <!-- ルートナビゲーションに対応するコンテンツ領域 -->
    <メイン>
      <ルータービュー></ルータービュー>
    </メイン>
  </div>
</テンプレート>

// home.vue にチェックボックスを配置します <el-checkbox v-model="checked">options</el-checkbox>

// about.vue に入力ボックスを配置します <el-input v-model="input" placeholder="Please enter content"></el-input>

// detail.vue のドロップダウン ボックス <el-select v-model="value" placeholder="Please select">
  <el-オプション
    v-for="オプション内の項目"
    :key="アイテム.値"
    :label="アイテム.ラベル"
    :value="アイテムの値"
  >
  </el-option>
</el-select>

分析する

  • ルータービューコンポーネントをラップするキープアライブコンポーネントを使用しなかった場合、左側でホームページを確認し、概要ページで情報を入力し、詳細ページでドロップダウンで情報を選択するという操作を実行しました。ルーティングページを離れて戻ってきたときに、ドロップダウンで情報を確認、入力、選択するといった、以前に実行していた操作が存在しなくなり、以前の状態が消えていることがわかりました。理由は非常に簡単です。ルーティング ページを離れると、ルーティング ページに対応するコンポーネントの destroy フック メソッドがトリガーされ、ルーティング ページに対応するコンポーネントが破棄されます。コンポーネントが破棄されると、コンポーネントにマウントされていたデータは消えてしまいます。
  • 同時に、右側の Vue.js 開発ツールでは、ルータービュー ビュー レイヤーが常にホーム、アバウト、詳細の各コンポーネント間を切り替えていることがわかります。コンポーネントの切り替えは、実際にはコンポーネントの継続的な作成と破棄のプロセスです。次に、keep-alive を使用した場合の効果を見てみましょう。

キープアライブ使用時の効果図

対応するコード

<テンプレート>
  <div class="box">
    <!-- ルートナビゲーション-->
    <div class="nav">
      <router-link to="/">ホームページへ移動</router-link>
      <router-link to="/about">about ページへ移動</router-link>
      <router-link to="/detail">詳細ページへ移動</router-link>
    </div>
    <!-- ルートナビゲーションに対応するコンテンツ領域 -->
    <メイン>
      <keep-alive> <!-- keep-alive でラップするとキャッシュできます -->
        <ルータービュー></ルータービュー>
      </キープアライブ>
    </メイン>
  </div>
</テンプレート>

分析する

ビュー レイヤー コンポーネントを keep-alive でラップすると、ルートが切り替えられても、チェック、入力、ドロップダウンしたコンテンツが失われないことがわかります。つまり、keep-alive は、以前のコンポーネントの状態を保存するために使用されます。

同時に、右側の Vue.js 開発ツールでは、router-view ビューで切り替えられた対応するコンポーネントがすでに非アクティブ状態になっていることがわかります。英語で「非アクティブ」とは、非アクティブで未使用という意味で、つまりキャッシュされていて破棄されていないことを意味します。したがって、コンポーネントに対して実行した操作とコンポーネントの状態はキャッシュされるため、ドロップダウンでチェック、入力、選択した内容はそのまま残ります。

Vue.js devtools は非常に便利で、Google からダウンロードできます。これは、Vue 開発に適したツールです。

疑問を投げかける

これを見ると、keep-alive を直接追加すると、ルーター ビュー階層の下にあるビューのすべてのコンポーネントがキャッシュされることがわかります。ただし、すべてをキャッシュするのではなく、一部だけをキャッシュしたい場合があります。どうすればよいでしょうか。それは問題ではありません。大手企業がすでに検討し、事前に解決してくれています。つまり、keep-aliveのinclude属性とexclude属性です。

includeとexcludeは特定のコンポーネントをキャッシュするかどうかを指定します

属性を含める

include は含めるという意味です。値は文字列、正規表現、または配列です。 include の値と同じ名前のコンポーネントのみがキャッシュされます。つまり、キャッシュするコンポーネントを指定できます。キャッシュするコンポーネントを複数指定することもできます。ここでは、複数のコンポーネント キャッシュを指定するための例として文字列を取り上げます。構文は、それらをコンマで区切ります。次のように:

//ホームコンポーネントとアバウトコンポーネントがキャッシュされることを指定します <keep-alive include="home,about" >
    <ルータービュー></ルータービュー>
</キープアライブ>

除外属性

Exclude は include の反意語に相当し、これは例外を意味し、キャッシュされないコンポーネントを指定します。使用方法は include と似ており、次のようになります。

// ホームとアバウトコンポーネント以外のすべてをキャッシュします。この例では、詳細コンポーネントのみがキャッシュされます <keep-alive exclude="home,about" >
    <ルータービュー></ルータービュー>
</キープアライブ>

include="about,detail"を例に挙げる

この構文は、about と detail のみがキャッシュされ、他のコンポーネントはキャッシュされないことを意味します。下の図の Vue ツールを見ると、キャッシュされたコンポーネントが対応する表示ルートにない場合は非アクティブになることもわかります。

include 属性と exclude 属性に加えて、keep-alive には max 属性もあります。この max 属性は、通常、あまり使用されません。その主な目的は、キャッシュされたコンポーネントの数を制御することです。後でキャッシュされたコンポーネントは、以前にキャッシュされたコンポーネントを排除します。これは、キャッシュ最適化戦略と同等です。結局のところ、適切なキャッシュはユーザーエクスペリエンスを向上させますが、過剰なキャッシュはコンピューターの速度を低下させます。

include と exclude の属性値はコンポーネントの名前です。

include と exclude の属性値は、コンポーネントの名前、つまり、コンポーネントの name 属性値、つまり、以下に示す name 属性値です。

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

疑問を投げかける

コンポーネントには対応するロジックjsパーツがあり、コンポーネントはデータを取得するためにリクエストを送信する必要があることはわかっています。通常、バックエンドのビッグネームにデータを要求するために、createフックまたはmountedフックでリクエストを送信します。キープアライブを使用した後のコンポーネントのフック機能の問題に関しては、次の点に注意する必要があります。

キープアライブフック関数の実行順序

まず、keep-alive コンポーネントを使用した後、アクティブ化されたフックと非アクティブ化されたフックがコンポーネントに自動的に追加されます。

  • activated はコンポーネントがアクティブ化(使用)されたときにトリガーされます。これは、このページに入るときにトリガーされることを意味します。
  • deactivated はコンポーネントが使用されていないとき(非アクティブ状態)にトリガーされ、このページを離れるときにトリガーされるものとして簡単に理解できます。

コンポーネントフックの実行順序の入力と終了

ホーム コンポーネントのみをキャッシュすると仮定して、コードを確認し、フック内の対応する順序を出力してみましょう。フックが実行される順序がわかり、自分でやってみて感動するでしょう

コードは次のとおりです

<テンプレート>
<div>
  <el-checkbox v-model="checked">オプション</el-checkbox>
</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
名前: "ホーム",
data() { 戻り値 { チェック済み: false } },
作成された() {
  console.log("私は作成されたフックです");
},
マウント() {
  console.log("私はマウントされたフックです");
},
アクティブ化() {
  console.log("フックがアクティブ化されました");
},
非アクティブ化() {
  console.log("私は非アクティブ化されたフックです");
},
破棄する前に() {
  console.log("私は beforeDestroy フックです"); したがって、次のように結論付けることができます。
},
};
</スクリプト>

コンポーネントを入力し、次のように結果を出力します。

私は作成されたフックです 私はマウントされたフックです 私はアクティブ化されたフックです

コンポーネント印刷をそのままにした結果は以下のとおりです

私は無効化されたフックです

結論を導く

最初のエントリと出口が作成 ---> マウント ---> アクティブ化 --> 非アクティブ化
後続のエントリと終了が有効 --> 無効

したがって、activated フックと deactivated フックでロジック処理を実行できます。これらの 2 つのフックは、mounted フックと beforeDestroy フックに少し似ていますが、それでも異なります。結局のところ、キープアライブを使用してもコンポーネントは破壊されない

キープアライブアプリケーションシナリオの例

  • テーブル内のデータ項目の詳細ページを表示すると、返されるステータスは、前のフィルター結果や前のページ数など、以前のステータスのままになります。
  • 入力ボックス、ドロップダウンボックス、スイッチスイッチなど、ルートがジャンプバックした後も、入力されたフォームの内容が残っています。ユーザーは多くのことを入力しており、ジャンプバックした後でクリアすることはできません。ユーザーに再度入力させることはできませんよね?
  • とにかく、以前の状態を維持するだけです。実際には、具体的な適用シナリオは多数ありますが、ここでは詳しく説明しません...

補充する

上記では、keep-alive が router-view をラップする小さなケースを使用して説明しました。実際、keep-alive は通常、router-view または動的コンポーネント コンポーネントのいずれかをラップします。コード自体は実際は同じです。動的コンポーネントのラッピングの使用方法は次のとおりです。

<keep-alive include="home" exclude="about">
     <component :is="どのコンポーネント"></component>
</キープアライブ>

keep-alive の include 属性と exclude 属性も v-bind の構文をサポートしているため、非常に柔軟性があります。

要約する

これで、vue の keep-alive コンポーネントの使用に関するこの記事は終了です。vue keep-alive コンポーネントに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue におけるキープアライブ マルチレベル ルーティング キャッシュの問題
  • vue keep-alive の簡単な概要
  • Vue のキープアライブコンポーネントの詳細な理解
  • Vue でキープアライブを適用する 2 つの方法
  • Vue のキープアライブの詳細な説明

<<:  Linux ディスクのシーケンシャル書き込みとランダム書き込みの方法

>>:  MySQL の order by ステートメントの最適化方法の詳細な説明

推薦する

nginx のスムーズな再起動を実装する方法

1. 背景サーバーの開発プロセスでは、新しいコードや構成をロードするためにサービスを再起動することが...

よく理解しましたかタグ 定義方法 使用方法

序文:今日、「<!DOCTYPE> タグを注意深く理解しましたか?」と尋ねられました。私...

Vue コンポーネントはどのように解析され、レンダリングされるのでしょうか?

序文この記事では、Vue コンポーネントがどのように解析され、レンダリングされるかを説明します。 V...

HTMLタグのフルネームと機能の紹介

アルファベット順DTD: このタグが許可される XHTML 1.0 DTD を示します。 S=厳密、...

JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明

目次1. JavaScript がシングルスレッドなのはなぜですか? 2. タスクキュー3. イベン...

MySQL共通ストレージエンジンの機能と使用方法の詳細な説明

この記事では、一般的な MySQL ストレージ エンジンの機能と使用方法を例を使って説明します。ご参...

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

JS を使用してファイルを操作する (FileReader は --node の fs を読み取ります)

目次JS はファイルを読み取る FileReader書類イベントとメソッド基本的な使い方イベント処理...

シンプルなID生成戦略: MySQLテーブルからグローバルに一意のIDを生成する実装

グローバル ID を生成する方法は多数あります。ここでは簡単な解決策を紹介します。MySQL の自動...

カラーブロックレポート効果の動的な表示を実現する HTML (サンプルコード)

HTMLカラーブロックを使用してデータを動的に表示する <スタイル タイプ="te...

Vue2.0は適応解像度を実装する

この記事では、適応解像度を実現するためのVue2.0の具体的なコードを参考までに紹介します。具体的な...

Vue が価格カレンダー効果を実現

この記事では、価格カレンダー効果を実現するためのVueの具体的なコードを例として紹介します。具体的な...

マークアップ言語 - HTML を学んだ後に何を学ぶべきか?

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

MySQLのバージョンアップ方法を超詳しく解説

目次1. はじめに2. データベースをバックアップする3. オリジナルのMysqlをアンインストール...

HTML iframe と frameset の違い_PowerNode Java Academy

導入1.<iframe> タグ: iframe は、ページ内に内部フレームを生成するイン...