VueのkeepAliveコンポーネントの機能と使い方の詳細な説明

序文

面接中、多くの面接官は「keep-alive が何をするのか知っていますか?」と質問する際に Vue について言及することがあります。

keep-aliveはvueの組み込みコンポーネントであり、このコンポーネントの機能は非アクティブなコンポーネントをキャッシュすることです。一般的に、コンポーネントが切り替えられると、デフォルトで破棄されることはわかっています。要求があれば、コンポーネントは切り替え後に破棄されず、前の状態が保存され、keep-aliveを使用して実現できます。

<keep-alive> は Vue の組み込みコンポーネントであり、コンポーネントの切り替え中に状態をメモリ内に保持して、DOM の繰り返しレンダリングを防ぐことができます。

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

スキャフォールディングを使用してプロジェクトを作成すると、home と about の 2 つのコンポーネントが生成され、ルーティングを通じて切り替えられます。

ホームコンポーネント

<テンプレート>
  <div class="home">
    <入力タイプ="テキスト">
  </div>
</テンプレート>

<スクリプト>
// @ は /src へのエイリアスです
'@/components/HelloWorld.vue' から HelloWorld をインポートします。

エクスポートデフォルト{
  名前: 'ホーム',
  コンポーネント:
    こんにちは世界
  }
}
</スクリプト>

ホームコンポーネントに入力ボックスを作成しました

コンポーネントについて

<テンプレート>
  <div class="about">
    <入力タイプ="テキスト">
  </div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
  名前:"について"
}
</スクリプト>

コンポーネントについても同様の入力ボックスを配置します

ホームコンポーネントの入力ボックスに何かを入力し、その後、about コンポーネントに切り替え、その後、ホームコンポーネントに戻ると、以前に入力した内容がクリアされていることがわかります。実際、about コンポーネントに切り替えると、ホームコンポーネントが破棄され、入力ボックスの値が自然にクリアされることは簡単に理解できます。

ホームコンポーネントに破棄されたライフサイクル関数を記述しました

about コンポーネントに切り替えると、home コンポーネントの destroy がトリガーされるため、home コンポーネントが破棄されます。

次に、keep-alive コンポーネントを使用して router-view コンポーネントをラップし、非アクティブなコンポーネントをキャッシュできます。

アプリのコンポーネント

<テンプレート>
  <div id="アプリ">
    <div id="nav">
      <router-link to="/">ホーム</router-link> |
      <router-link to="/about">について</router-link>
    </div>
    <キープアライブ>
      <ルータービュー />
    </キープアライブ>
    
  </div>
</テンプレート>

書き終えると、about コンポーネントに切り替えたときに、home コンポーネントの destroy がトリガーされず、home コンポーネントの値も保存されていることがわかります。

しかし、これは明らかに良くありません。about コンポーネントの値もキャッシュされ、つまりすべてのルーティングコンポーネントがキャッシュされるため、パフォーマンスが大幅に低下し、要件を満たせません。ここでは、home コンポーネントのみをキャッシュします。

キープアライブには2つの特性がある

文字列または正規表現。一致するコンポーネントのみがキャッシュされます。

含める値は、コンポーネント名に一致する文字列または正規表現であり、キャッシュされます。
除外値は、コンポーネント名に一致し、キャッシュされない文字列または正規表現です。

まず、include を使用してコンポーネントで定義された名前と一致させ、キャッシュします。

<キープアライブ include="home">
   <ルータービュー />
</キープアライブ>

ホームはキャッシュされているが、aboutはキャッシュされていないことがわかります。

excludeは除外することです。これは説明しませんが、非常に簡単です。これに加えて、ルートのメタ属性を使用して制御することもできます。

{
      パス： '/'、
      名前: 'ホーム',
      メタ:{
        キープアライブ:true
      },
      コンポーネント: ホーム
    }

ホームルーティングルールクロックのメタでkeepAlive属性をtrueに追加します。これは、現在のルーティングコンポーネントをキャッシュする必要があることを意味します。

keep-alive コードは v-if と組み合わせてラップすることができます。meta の keepAlive が true の場合はキャッシュされ、そうでない場合はキャッシュされません。これにより、より柔軟になります。

<キープアライブ>
      <router-view v-if="$route.meta.keepAlive" />
</キープアライブ>
<ルータービュー v-if="!$route.meta.keepAlive" />

このようにコンポーネントのキャッシュは実装されていますが、まだいくつか問題があります。コンポーネントはキャッシュされており、破棄されていないため、切り替え時にコンポーネントが再作成されることはなく、当然、create などのライフサイクル関数も呼び出されません。そのため、現在のコンポーネントがアクティブかどうかを取得するには、activated と deactivated を使用する必要があります。

ホームコンポーネントにアクティブ化および非アクティブ化ライフサイクル関数を記述しました

アクティブ化(){
    console.log("ああ、私を見たんだね")
    console.log("----------アクティブ化されました--------")
  },
  非アクティブ化(){
    console.log("嫌だ！！また出て行ったな")
    console.log("----------非アクティブ化---------")
  }

上の GIF からはっきりとわかると思います。この時点で、キープアライブはほぼ完了です。

要約する

Vue における keepAlive コンポーネントの役割と使い方についてはこれで終了です。Vue における keepAlive コンポーネントの使い方についてさらに詳しく知りたい方は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

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