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

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

王林

リリース： 2023-07-24 15:37:10

オリジナル

1566 人が閲覧しました

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

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

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

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

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

ログイン後にコピー

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

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

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 つのイベントを提供します。

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

Vue プロジェクトを作成し、Vue Router をインストールします。
```
vue create keep-alive-demo
cd keep-alive-demo
vue add router
```
ログイン後にコピー
src/App.vue ファイルを変更し、を変更します。タグでラップ:
```
<template>
  <div id="app">
 <keep-alive>
   <router-view/>
 </keep-alive>
  </div>
</template>
```
ログイン後にコピー

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;

ログイン後にコピー

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 サイトの他の関連記事を参照してください。