Vue のキープアライブ コンポーネントを使用してページの繰り返しレンダリングを減らす方法

Vue のキープアライブ コンポーネントを使用してページの繰り返しレンダリングを減らす方法

Vue.js では、ページの繰り返しレンダリングが一般的な問題です。ページを切り替えたり、複数のコンポーネント間を移動したりすると、Vue はコンポーネント ツリー全体を再レンダリングし、このプロセスで大量のコンピューティング リソースと時間を消費する可能性があります。この問題を解決するために、Vue はキープアライブと呼ばれる組み込みコンポーネントを提供します。これは、ページの繰り返しレンダリングを減らすのに役立ちます。

キープアライブ コンポーネントは、ステートフル サブコンポーネントをキャッシュするために Vue によって提供される抽象コンポーネントです。その機能は、サブコンポーネントが破棄され再作成されるのを防ぐためにサブコンポーネントをキャッシュし、それによってページの繰り返しレンダリングのコストを削減することです。キープアライブ コンポーネントを使用してページのパフォーマンスを最適化する方法を見てみましょう。

まず、親コンポーネントでキープアライブ コンポーネントを使用して、キャッシュする必要がある子コンポーネントをラップする必要があります。たとえば、ページを切り替えるときにキャッシュしたい Home というサブコンポーネントがあります。以下に示すように、これをキープアライブ コンポーネントでラップできます。

<template>
  <keep-alive>
    <Home />
  </keep-alive>
</template>

次に、キープアライブ コンポーネントのプロパティを設定することで、ページのレンダリングをさらに最適化できます。キープアライブ コンポーネントは、キャッシュする必要があるコンポーネントとキャッシュする必要のないコンポーネントを指定するための include 属性と exclude 属性を提供します。

たとえば、すべてのサブコンポーネントをキャッシュしたい場合は、 include 属性を「*」に設定できます。

<template>
  <keep-alive :include="['*']">
    ...
  </keep-alive>
</template>

特定のサブコンポーネントのみをキャッシュしたい場合は、次のように設定できます。 include 属性は、キャッシュする必要があるサブコンポーネントの名前を含む配列に設定されます。

<template>
  <keep-alive :include="['Home', 'About']">
    ...
  </keep-alive>
</template>

include 属性に加えて、keep-alive コンポーネントは、どのサブコンポーネントを指定するかを指定するために使用される exclude 属性も提供します。コンポーネントをキャッシュする必要はありません。 include 属性と同様に、exclude 属性を「*」に設定してすべてのコンポーネントを除外するか、キャッシュする必要のないサブコンポーネントの名前を含む配列に設定できます。

キープアライブ コンポーネントを使用している間、このコンポーネントが提供するフック関数を使用して、ページのレンダリングをさらに最適化することもできます。キープアライブ コンポーネントには、アクティブ化と非アクティブ化という 2 つのフック関数があります。アクティブ化されたフック関数はコンポーネントがアクティブ化されたときに呼び出され、非アクティブ化されたフック関数はコンポーネントが非アクティブ化されたときに呼び出されます。

サブコンポーネントがキャッシュによってアクティブ化されたときに実行する必要がある、アクティブ化されたフック関数でいくつかのロジックを実行できます。たとえば、アクティブ化されたフック関数でネットワーク リクエストを送信して、サブコンポーネントのデータを更新できます。同様に、非アクティブ化されたフック関数では、キャッシュされたデータのクリアなど、サブコンポーネントが非アクティブ化されたときに実行する必要があるいくつかのロジックを実行できます。

以下は、アクティブ化されたフック関数の使用例です:

<template>
  <keep-alive :include="['Home']">
    <Home />
  </keep-alive>
</template>

<script>
export default {
  components: {
    Home
  },
  activated() {
    // 在子组件被激活时执行的逻辑
    this.$http.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

キープアライブ コンポーネントを使用することにより、ページの繰り返しレンダリングを効果的に削減し、パフォーマンスとユーザー エクスペリエンスを向上させることができます。ページの。同時に、包含属性と除外属性、フック関数、その他の関数を使用して、ページのレンダリングをさらに最適化することもできます。この記事が、Vue のキープアライブ コンポーネントの理解と使用に役立つことを願っています。

以上がVue のキープアライブ コンポーネントを使用してページの繰り返しレンダリングを減らす方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。