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 ステートメントの最適化方法の詳細な説明

推薦する

開発にVscodeとdockerを組み合わせて使用​​する詳細なプロセス

序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...

MySQL の複数テーブル関連付け 1 対多クエリを使用して最新のデータを取得する方法の例

この記事では、MySQL で複数のテーブルを使用して 1 対多のクエリを使用して最新のデータを取得す...

床スクロール効果を実現する js

この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンを...

CenterOS7 インストールおよび構成環境 jdk1.8 チュートリアル

1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...

メモリ構成が過剰でMySQLが起動できない問題の解決方法

問題の説明MySQL の起動時にエラーが報告されます。エラー ログを確認してください。 [エラー] ...

docker に基づいて nginxssl 設定を開始する

前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...

大量のデータを含むエレメントのシャトルボックスで「すべて選択」をクリックするとスタックする問題の解決方法

目次解決策1: EUIの転送コンポーネントをコピーして変更し、プロジェクトディレクトリに導入する解決...

Mysql接続数の設定と取得方法

接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...

Win 8 以降での最新の MySQL バージョン 5.7.17 (64 ビット ZIP グリーン バージョン) のインストールと展開のチュートリアル

まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...

Linux で MySQL データベースのスケジュールされたバックアップを実装する簡単な方法

詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...

MySQL テーブルにはどのくらいの量のデータを保存できますか?

プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...

Vue プロジェクトをパッケージ化して Apache サーバーにデプロイする手順

開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...

Vue.set() と this.$set() の使い方と違い

開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...

HTML メタの使用例

使用例コードをコピーコードは次のとおりです。 <!DOCTYPE html> <!...

コードを通じてHTMLエスケープ文字を識別する方法について説明します

データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...