keep-alive は Vue の組み込みコンポーネントの 1 つで、主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。 効果 コンポーネントの切り替え中に状態をメモリ内に保持することで、DOM レンダリングの繰り返しを防ぎ、読み込み時間とパフォーマンスの消費を削減し、ユーザー エクスペリエンスを向上させます。 1. キープアライブの使用<keep-alive> が動的コンポーネントをラップすると、非アクティブなコンポーネント インスタンスは破棄されるのではなくキャッシュされます。 <keep-alive> 内でコンポーネントが切り替えられると、それに応じてアクティブ化および非アクティブ化されたライフサイクル フック関数が実行されます。 小道具: include - 文字列または正規表現。名前が一致するコンポーネントのみがキャッシュされます。
一部のコンポーネントの状態のみをキャッシュする場合は、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 ガードが呼び出されます。
コンポーネントはキャッシュされているため、キャッシュ ルート/コンポーネントに再度入ったときにこれらのフックはトリガーされません。
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 の他の関連記事にも注目してください。 以下もご興味があるかもしれません:
|
>>: システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル
標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...
背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...
目次リスナー1.ウォッチエフェクト2.見る1.1 聴くための最初の方法1.2 聞く2つ目の方法1.3...
Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...
質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...
1. Animate.css の紹介Animate.css は、Web プロジェクトですぐに使用で...
目次概要方法1: params経由でパラメータを渡す方法2: クエリを通じてパラメータを渡す方法3:...
目次序文1. カプセル化の重要性2. どのようにカプセル化しますか? 1. アイデア2. 準備2. ...
Linux タスク管理 - バックグラウンド実行と終了fg、bg、ジョブ、&、ctrl + ...
int(1) の長さ 1 は、許可されたストレージ幅を表していないことはすでにご存知かもしれません...
背景開発やデバッグには Chrome Dev Tools がよく使用されますが、ページのパフォーマン...
1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...
注意: .NET FrameWork はコア モードで実行できないため、コア インストール モードの...
MySQL パスワードを 2 回忘れてしまいましたか?最初、私はアンインストールして再インストールす...
コード:コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC &...