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

1. キープアライブの使用

<keep-alive> が動的コンポーネントをラップすると、非アクティブなコンポーネントインスタンスは破棄されるのではなくキャッシュされます。
<transition> と同様に、<keep-alive> は抽象コンポーネントです。DOM 要素自体はレンダリングされず、コンポーネントの親コンポーネントチェーンにも表示されません。

<keep-alive> 内でコンポーネントが切り替えられると、それに応じてアクティブ化および非アクティブ化されたライフサイクルフック関数が実行されます。

小道具:

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

含める & 除外する

一部のコンポーネントの状態のみをキャッシュする場合は、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 ガードが呼び出されます。

ページに初めてアクセスすると、フックのトリガーの順序は作成->マウント->アクティブ化です。

コンポーネントはキャッシュされているため、キャッシュルート/コンポーネントに再度入ったときにこれらのフックはトリガーされません。

beforeCreate の作成と beforeMount のマウントはトリガーされません。

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 の他の関連記事にも注目してください。

以下もご興味があるかもしれません: