問題の説明(キープアライブとは何か)
また、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> 分析する
キープアライブ使用時の効果図対応するコード <テンプレート> <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 コンポーネントを使用した後、アクティブ化されたフックと非アクティブ化されたフックがコンポーネントに自動的に追加されます。
コンポーネントフックの実行順序の入力と終了 ホーム コンポーネントのみをキャッシュすると仮定して、コードを確認し、フック内の対応する順序を出力してみましょう。フックが実行される順序がわかり、自分でやってみて感動するでしょう コードは次のとおりです <テンプレート> <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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux ディスクのシーケンシャル書き込みとランダム書き込みの方法
>>: MySQL の order by ステートメントの最適化方法の詳細な説明
序文Docker と VS Code を使用すると、ローカル開発環境全体を最適化し、プロジェクトの進...
この記事では、MySQL で複数のテーブルを使用して 1 対多のクエリを使用して最新のデータを取得す...
この記事ではjQueryを使用して、階段のスライド効果を実装し、フロアをスクロールし、フロアボタンを...
1. まずcenterosに付属のJDKをアンインストールします rpm-qa|grepopenjd...
問題の説明MySQL の起動時にエラーが報告されます。エラー ログを確認してください。 [エラー] ...
前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...
目次解決策1: EUIの転送コンポーネントをコピーして変更し、プロジェクトディレクトリに導入する解決...
接続数を取得する --- 最大接続数を取得します。SHOW VARIABLES LIKE '...
まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...
詳細な手順は次のとおりです。 1. ディスク容量を確認します。 [root@localhost バッ...
プログラマーは MySQL を扱う機会が多く、毎日触れているとも言えますが、MySQL テーブルには...
開発環境では、vue プロジェクトは、ローカルで Express サーバーを構築することをベースにし...
開発に Vue を使用する場合、次のような状況に遭遇することがあります。Vue インスタンスを生成し...
使用例コードをコピーコードは次のとおりです。 <!DOCTYPE html> <!...
データ内に次のような特徴を持つ「 ' 」などの文字が含まれることがあります。 &# ...