VUE3 エントリの開発: コンポーネントのキャッシュにキープアライブを使用する

Vue は非常に人気のあるフロントエンド フレームワークであり、Vue3 は Vue の最新バージョンです。 Vue3 では、コンポーネントのキャッシュにキープアライブを使用することは、Web サイトのパフォーマンスを大幅に向上させることができる非常に便利な機能です。

keep-alive は Vue3 の抽象コンポーネントであり、頻繁な切り替え中にコンポーネントが繰り返し作成および破棄されるのを防ぐためにコンポーネントをキャッシュできます。この機能は、カルーセル、タブ、ダイアログなど、頻繁な切り替えが必要な一部のコンポーネント シナリオで非常に役立ちます。

Vue3 でコンポーネントのキャッシュにキープアライブを使用する方法を紹介します。

1. キープアライブの基本的な使い方

1. Vue3 でキープアライブ コンポーネントを使用する

キープアライブを使用するには、以下に示すように、コンポーネントのルート要素に タグを追加します:

<template>
  <keep-alive>
    <component :is="selected"></component>
  </keep-alive>
</template>

2. コンポーネント キャッシュ

keep-alive タグを追加すると、現在の表示されたコンポーネントがキャッシュされます。コンポーネントが切り替わると、Vue3 はコンポーネントを再作成するのではなく、キャッシュからコンポーネントをロードすることを優先するため、Web サイトのパフォーマンスが向上します。

2. キープアライブの高度な使用法

1. キャッシュ戦略構成

デフォルトでは、キープアライブはすべてのコンポーネントをキャッシュしますが、場合によっては、特定のコンポーネントをキャッシュしたい。現時点では、include 属性と exclude 属性を使用してキャッシュ戦略を構成できます。

テンプレートでは、 include 属性を使用して、キャッシュする必要があるコンポーネントを構成できます:

<template>
  <keep-alive include="component-a, component-b">
    <component :is="selected"></component>
  </keep-alive>
</template>

この方法では、component-a および component-b という名前のコンポーネントのみがキャッシュされます。 。

テンプレートでは、exclude 属性を使用して、キャッシュする必要のないコンポーネントを構成することもできます。

<template>
  <keep-alive exclude="component-c">
    <component :is="selected"></component>
  </keep-alive>
</template>

この方法では、component-c という名前のコンポーネントはキャッシュされません。

2. キャッシュ ライフ サイクル

キャッシュ コンポーネントのライフ サイクルでは、Vue3 はキャッシュ コンポーネントのライフ サイクルを監視するために使用できるいくつかのフック関数を提供します。

activated は、コンポーネントがアクティブ化されたときにトリガーされるフック関数です。アクティブ化されたフック関数は、コンポーネントがキャッシュからロードされるときにトリガーされます。アクティブ化されたキャッシュ コンポーネントに対していくつかの操作を実行できます。

deactivated は、コンポーネントが非アクティブ化されたときにトリガーされるフック関数です。非アクティブ化されたフック関数は、コンポーネントが現在のキャッシュから削除されるか、別のコンポーネントに切り替えられるとトリガーされます。

以下に示すように、コンポーネント内でこれら 2 つのフック関数を定義して、キャッシュ コンポーネントのライフ サイクルを監視できます:

<script>
export default {
  activated() {
    // 在缓存组件被激活时进行一些操作
  },
  deactivated() {
    // 在缓存组件被停用时进行一些操作
  }
}
</script>

3. 概要

キープアライブを使用するコンポーネント向け キャッシュにより Web サイトのパフォーマンスが大幅に向上します。Vue3 では、キャッシュ ポリシーの構成やキャッシュ ライフ サイクルの監視などの高度な使用法が提供されます。これらの機能をニーズに応じて柔軟に使用して、Web サイトのパフォーマンスを最適化できます。

以上がVUE3 エントリの開発: コンポーネントのキャッシュにキープアライブを使用するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。