vue でコンポーネントのキャッシュにキープアライブを合理的に使用する方法-Vue.js-php.cn

vue でコンポーネントのキャッシュにキープアライブを合理的に使用する方法

WBOY

リリース： 2023-07-21 14:17:20

オリジナル

949 人が閲覧しました

Vue.js は、コンポーネント開発を使用してコードをより適切に管理および再利用できるようにする人気のフロントエンドフレームワークです。その中でも、keep-alive コンポーネントは Vue.js が提供する非常に実用的な機能で、ページのパフォーマンスの最適化に役立ちます。この記事では、コンポーネントのキャッシュに keep-alive を適切に使用する方法について説明します。

`キープアライブ`コンポーネントとは何ですか?

Vue.js では、keep-alive は、コンポーネントキャッシュの効果を実現するために動的コンポーネントの周囲にラップできる抽象コンポーネントです。ラップされているコンポーネントが切り替わると、keep-alive はそれを破棄するのではなくキャッシュするため、次回そのコンポーネントに再び切り替えるときに再レンダリングして初期化する必要はありません。これにより、ページの応答速度とユーザーエクスペリエンスが向上します。

`keep-alive` コンポーネントの使用方法は?

keep-alive コンポーネントの使用は非常に簡単で、キャッシュする必要があるコンポーネントを <keep-alive> タグで囲むだけです。以下に例を示します。

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

    <button @click="switchComponent">切换组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA',
    };
  },
  methods: {
    switchComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    },
  },
};
</script>

ログイン後にコピー

上の例では、2 つの動的コンポーネントを含む親コンポーネントを作成しました。ボタンをクリックすると、2 つの動的コンポーネントの表示が切り替わります。これら 2 つの動的コンポーネントを keep-alive でラップして、コンポーネントキャッシュを実装します。

注意事項

keep-alive コンポーネントを使用する場合、注意が必要な注意事項がいくつかあります。

使用する `include` および `exclude` プロパティ

keep-alive は、必要なコンポーネントを指定するための include および exclude プロパティを提供します。キャッシュされるコンポーネントとキャッシュから除外する必要があるコンポーネント。どちらのプロパティも文字列または正規表現の配列を受け入れることができます。

<keep-alive :include="['ComponentA', /^ComponentB/]" :exclude="['ComponentB']">
  <component :is="currentComponent"></component>
</keep-alive>

ログイン後にコピー

上記の例では、キャッシュする必要がある ComponentA コンポーネントと、正規表現 ComponentB に一致するコンポーネントを指定し、ComponentB を除外しました。 コンポーネント。

`max` 属性を使用します。

keep-alive は、必要なコンポーネントインスタンスを指定するための max 属性も提供します。キャッシュされる数量制限。キャッシュされたコンポーネントインスタンスの数が上限に達すると、最も古いキャッシュされたコンポーネントインスタンスが破棄されます。

<keep-alive :max="5">
  <component :is="currentComponent"></component>
</keep-alive>

ログイン後にコピー

上の例では、キャッシュを最大 5 つのコンポーネントインスタンスに制限しました。

`activated` および `deactivated` フック関数を使用する

キャッシュされたコンポーネントが再アクティブ化されると、そのコンポーネントに activated フック関数を渡すことができますいくつかの操作を実行します。同様に、キャッシュされたコンポーネントが無効になっている場合、deactivated フック関数を通じて一部のアクションを実行できます。

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent" @activated="handleActivated" @deactivated="handleDeactivated"></component>
    </keep-alive>

    <button @click="switchComponent">切换组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleActivated() {
      console.log('组件被激活');
    },
    handleDeactivated() {
      console.log('组件被禁用');
    },
  },
};
</script>

ログイン後にコピー

上記の例では、キャッシュされたコンポーネントがアクティブ化または無効化されると、handleActivated メソッドと handleDeactivated メソッドがそれぞれトリガーされます。

概要

キープアライブコンポーネントを合理的に使用することで、コンポーネントのキャッシュを実現し、ページのパフォーマンスとユーザーエクスペリエンスを向上させることができます。 include および exclude 属性を使用してキャッシュまたは除外する必要があるコンポーネントを指定し、max# を使用してキャッシュされるコンポーネントインスタンスの数の上限を制御できます。＃＃属性。さらに、activated および deactivated フック関数を使用して、いくつかのカスタム操作を実行することもできます。

この記事が、コンポーネントのキャッシュに

keep-alive を適切に使用する方法を理解するのに役立つことを願っています。 Vue.js 開発でより良い結果が得られることを願っています。

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