Vue フロントエンド開発における keepAlive の使用方法の詳細な説明

序文

keep-alive は Vue の組み込みコンポーネントです。動的コンポーネントをラップすると、非アクティブなコンポーネントインスタンスを破棄するのではなくキャッシュします。

コンポーネントの切り替え中、状態はメモリ内に保持され、DOM レンダリングの繰り返しを防ぎ、読み込み時間とパフォーマンスの消費を削減し、ユーザーエクスペリエンスを向上させます。使い方

<キープアライブ>
    <コンポーネント />
</キープアライブ>

ここのコンポーネントはキャッシュされます。

keep-avlive フック関数

keep-alive で作成されたコンポーネントには、activated と deactivated という 2 つのライフサイクルフックが追加されます。 activated: キープアライブコンポーネントがアクティブ化されたときに呼び出されます。キープアライブはデータをメモリ内に保持します。ページに入るたびに最新のデータを取得したい場合は、元の create フック関数でデータを取得するタスクを引き受け、アクティブ化された段階でデータを取得する必要があります。
deactivated: キープアライブコンポーネントが非アクティブ化されたときに呼び出されます。キープアライブが使用されている場合、コンポーネントは破棄されずにキャッシュされるため、beforeDestory フックと destroy フックは呼び出されません。したがって、deactivated フックは、localStorge データのクリアなど、beforeDestory と destroy の代替として考えることができます。

keep-avliveはどのコンポーネントをキャッシュするか

keep-avlive でコンポーネントをキャッシュする方法は 2 つあります。1 つは、keep-avlive コンポーネントによって提供される include および exclude プロパティを使用して、キャッシュ用のパラメータを通じて対応するコンポーネントを一致させる方法です。もう 1 つは、ルートに meta 属性を設定する方法です。
includeプロパティとexcludeプロパティを使用してキャッシュコンポーネントの設定を完了します

/* test という名前のコンポーネントをキャッシュします*/
<キープアライブ include='テスト'>
      <ルータービュー/>
</キープアライブ>

include を使用して、test という名前のコンポーネントをキャッシュします。

<keep-alive exclude="テスト"> 
  <ルータービュー/>
</キープアライブ>

exclude を使用すると、test という名前のコンポーネントはキャッシュされません。
ルート内のメタ属性を使用してキャッシュコンポーネントを設定します。

デフォルトの新しいルーターをエクスポートします({
  モード: '履歴'、
  ルート: [
    {
      パス： '/'、
      名前: 'ホーム',
      コンポーネント: ホーム、
      リダイレクト: '商品'、
      子供たち： [
        {
          パス: '商品',
          名前: 「商品」、
          構成要素: 商品、
          メタ: {
        	keepAlive: false // キャッシュは不要 }
        },
        {
          パス: '評価',
          名前: '評価',
          コンポーネント: 評価、
          メタ: {
        	keepAlive: true // キャッシュが必要 }
        }
      ]
    }
  ]
})

商品コンポーネントはキャッシュする必要がありますが、評価はキャッシュする必要はありません。コンポーネントキャッシュ設定を動的に完了するには、次のステートメントを使用します。設定コードは次のとおりです。

<テンプレート>
  <div id="アプリ">
  	<キープアライブ>
      <ルータービュー v-if="$route.meta.keepAlive"></ルータービュー>
    </キープアライブ>
    <ルータービュー v-if="!$route.meta.keepAlive"></ルータービュー>
  </div>
</テンプレート>

例

KeepCom1 と KeepCom2 の 2 つのコンポーネントを設定します。KeepCom1 にはキャッシュを設定し、KeepCom2 にはキャッシュを設定しません。 2 つのフック関数を同時に使用してテストします。ここでは、ルーティングメタを使用してキャッシュコンポーネントの設定を実装します。
KeepCom1 コードは次のとおりです。

<テンプレート>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">子要素を追加</button>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'keepCom1',
  メソッド: {
    追加 （） {
      ul = document.getElementsByClassName('content')[0] とします。
      li = document.createElement('li') とします。
      li.innerHTML = '要素を追加しています'
      ul.appendChild(li)
    }
  },
  アクティブ化（）{
    console.log('キャッシュがアクティブ化された実行')
  },
  非アクティブ化（）{
    console.log('キャッシュが非アクティブ化された実行')
  }
}
</スクリプト>
<スタイル>
</スタイル>

KeepCom2 コードは次のとおりです。

<テンプレート>
  <div class="wrapper">
    <ul class="content"></ul>
    <button class="add" id="add" @click="add">子要素を追加</button>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  名前: 'keepCom2',
  メソッド: {
    追加 （） {
      ul = document.getElementsByClassName('content')[0] とします。
      li = document.createElement('li') とします。
      li.innerHTML = '要素を追加しています'
      ul.appendChild(li)
    }
  },
  アクティブ化（）{
    console.log('キャッシュがアクティブ化された実行')
  },
  非アクティブ化（）{
    console.log('キャッシュが非アクティブ化された実行')
  }
}
</スクリプト>
<スタイル>
</スタイル>

KeepCom1 と KeepCom2 のコードは基本的に同じで、ページにノードを追加します。
keepAvliveTestコードは次のとおりです。

<テンプレート>
  <div align="center" style="margin-top: 20px;">
    <router-link to="/keepAvliveTest/keepcom1">キャッシュを使用する</router-link>
    <router-link to="/keepAvliveTest/keepcom2">キャッシュを使用しない</router-link>
    <キープアライブ>
      <ルータービュー v-if="$route.meta.keepAlive"></ルータービュー>
    </キープアライブ>
    <ルータービュー v-if="!$route.meta.keepAlive"></ルータービュー>
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前: 'keepAvliveTest'
}
</スクリプト>
<スタイル>
</スタイル>

keepcom1とkeepcom2コンポーネント間の切り替えを完了します。実行後の結果は次のとおりです。

ここに画像の説明を挿入

keepcom1はキャッシュを使用します。ページを切り替えると、前回追加した3つの要素が残ったまま、フック関数が実行されます。 Keepcom2 はキャッシュを使用しません。ページを切り替えると、前回追加した要素は存在しなくなり、初期状態に復元されます。そして、両方のフックは実行されません。

要約と注釈

キャッシュする必要があるページを設定するときは、コードの結合が少なくなるように、ルーターでメタタグを使用することをお勧めします。 keep-alive は、まず、含まれているコンポーネントの名前フィールドと一致します。名前が利用できない場合は、現在のコンポーネントのコンポーネント構成に登録されている名前と一致します。キープアライブに含まれていますが、除外、アクティブ化、非アクティブ化の条件を満たしている場合は呼び出されません

上記は、vue フロントエンド開発における keepAlive の使用に関する詳細な説明の詳細な内容です。vue フロントエンドの詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

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