vue のキープアライブを使用してページのパフォーマンスを最適化する方法

Vue のキープアライブを使用してページのパフォーマンスを最適化する方法

はじめに:
Vue プロジェクトを開発するとき、ページ間を切り替えるときに現在のページを破棄したくないという状況がよくあります。コンポーネント インスタンスをキャッシュしますが、次回アクセス時のパフォーマンスを向上させるためにキャッシュされます。 Vue には、コンポーネントのキャッシュ機能を簡単に実装できる keep-alive コンポーネントが用意されており、この記事では、keep-alive を使用してページのパフォーマンスを最適化する方法について詳しく紹介します。

1. キープアライブ コンポーネントの概要
Vue のキープアライブ コンポーネントは、ラップするコンポーネントをキャッシュし、次回アクセスしたときにキャッシュ内のコンポーネント インスタンスを直接レンダリングできる抽象コンポーネントです。コンポーネントの作成と破棄を繰り返すオーバーヘッドを回避し、パフォーマンスを向上させます。

2. keep-alive の基本的な使用法
keep-alive コンポーネントの使用は非常に簡単です。キャッシュする必要があるコンポーネントの外側に 7c9485ff8c3cba5ae9343ed63c2dc3f7 タグをネストするだけです。例:

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

上記のコードでは、975b587bf85a482ea10b0a28848e78a4 は Vue Router によって提供されるルーティング出口であり、キャッシュする必要がある任意のコンポーネントに置き換えることができます。

3. keep-alive の属性とイベント
keep-alive は、コンポーネント キャッシュのライフ サイクルを制御および監視するためのいくつかの属性とイベントを提供します。

1. Attributes
   keep-alive コンポーネントには 2 つの主要な属性があります:

• include: 必要なコンポーネントの名前の指定で構成されます。キャッシュされた配列になります。 include 属性で指定されたコンポーネントのみがキャッシュされ、他のコンポーネントはキャッシュされません。例:

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

  上記のコードでは、Home と About という名前のコンポーネントのみがキャッシュされ、他のコンポーネントはキャッシュされません。

• exclude: キャッシュする必要のないコンポーネント名の配列を指定します。 exclude 属性で指定されたコンポーネントはキャッシュされませんが、他のコンポーネントはキャッシュされます。例:

  <keep-alive :exclude="['Login']">
  <router-view></router-view>
  </keep-alive>

  上記のコードでは、Login という名前のコンポーネントはキャッシュされませんが、他のコンポーネントはキャッシュされます。

2. イベント
   キープアライブ コンポーネントは、キャッシュ コンポーネントのライフ サイクルをリッスンするための 2 つのイベントを提供します。

• activated: コンポーネントがアクティブ化されるとトリガーされます。例:

  <keep-alive @activated="handleActivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleActivated() {
    console.log('Component activated');
  }
  }

  上記のコードでは、コンポーネントがアクティブ化されると、handleActivated メソッドが呼び出され、ログが出力されます。

• deactivated: コンポーネントが非アクティブ化されるとトリガーされます。例:

  <keep-alive @deactivated="handleDeactivated">
  <router-view></router-view>
  </keep-alive>
  
  methods: {
  handleDeactivated() {
    console.log('Component deactivated');
  }
  }

  上記のコードでは、コンポーネントが非アクティブ化されると、handleDeactivated メソッドが呼び出されてログが出力されます。

4. デモの例
以下では、実際の例を使用して、キープアライブを使用してページのパフォーマンスを最適化する方法を示します。

1. Vue プロジェクトを作成し、Vue Router をインストールします。

   vue create keep-alive-demo
   cd keep-alive-demo
   vue add router

2. src/App.vue ファイルを変更し、975b587bf85a482ea10b0a28848e78a4 を変更します。 7c9485ff8c3cba5ae9343ed63c2dc3f7 タグでラップ:

   <template>
     <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
     </div>
   </template>

3. src/router/index.js ファイルに、キャッシュする必要がある 2 つのコンポーネントに対応する 2 つのルートを追加します。

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   import Home from '@/views/Home.vue';
   import About from '@/views/About.vue';
   
   Vue.use(VueRouter);
   
   const routes = [
     {
    path: '/',
    name: 'Home',
    component: Home,
     },
     {
    path: '/about',
    name: 'About',
    component: About,
     },
   ];
   
   const router = new VueRouter({
     mode: 'history',
     base: process.env.BASE_URL,
     routes,
   });
   
   export default router;

4. Home.vue コンポーネントと About.vue コンポーネントを src/views ディレクトリに作成し、内容を入力します:
   Home.vue:

   <template>
     <div>
    <h1>Home</h1>
    <button @click="handleButtonClick">Click me</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
     },
   };
   </script>

About.vue:

<template>
  <div>
    <h1>About</h1>
    <button @click="handleButtonClick">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleButtonClick() {
      console.log('Button clicked');
    },
  },
};
</script>

これまでのところ、キープアライブを使用してページのパフォーマンスを最適化する簡単な例が完成しました。

結論:
Vue の keep-alive コンポーネントを使用すると、コンポーネントのキャッシュ機能を簡単に実装でき、ページのレンダリング パフォーマンスが向上します。実際のプロジェクトでは、頻繁にアクセスおよび操作される一部のコンポーネントを必要に応じてキャッシュして、コンポーネントの作成と破棄の繰り返しを回避し、ユーザーの対話エクスペリエンスを最適化できます。この記事がキープアライブの理解と使用に役立つことを願っています。

以上がvue のキープアライブを使用してページのパフォーマンスを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。