Comment utiliser le keep-alive de vue pour optimiser les performances des pages

Comment utiliser le keep-alive de Vue pour optimiser les performances des pages

Introduction :
Lors du développement de projets Vue, nous rencontrons souvent une situation : lors du basculement entre les pages, nous ne voulons pas détruire l'instance de composant de la page actuelle, mais la mettre en cache pour améliorer les performances lors de votre prochaine visite. Vue fournit le composant keep-alive, qui peut facilement implémenter la fonction de mise en cache du composant. Cet article présentera en détail comment utiliser keep-alive pour optimiser les performances des pages.

1. Introduction aux composants keep-alive
Le composant keep-alive de Vue est un composant abstrait qui peut mettre en cache les composants qu'il encapsule et restituer directement les instances de composants dans le cache lors de la prochaine visite, évitant ainsi la création et la destruction répétées des composants. améliorant ainsi les performances.

2. Utilisation de base de keep-alive
L'utilisation du composant keep-alive est très simple. Il vous suffit d'imbriquer une balise en dehors du composant qui doit être mis en cache, par exemple :

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

In. le code ci-dessus, est la sortie de routage fournie par Vue Router. Nous pouvons le remplacer par n'importe quel composant qui doit être mis en cache.

3. Propriétés et événements de keep-alive
keep-alive fournit des propriétés et des événements pour contrôler et surveiller le cycle de vie du cache de composants.

1. Attributs
   Les composants keep-alive ont deux attributs principaux :

• include : un tableau qui spécifie les noms des composants qui doivent être mis en cache. Seuls les composants spécifiés par l'attribut include seront mis en cache, les autres composants ne seront pas mis en cache. Par exemple :

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

  Copier après la connexion

  Dans le code ci-dessus, seuls les composants nommés Home et About seront mis en cache, les autres composants ne seront pas mis en cache.

• exclure : spécifiez un tableau de noms de composants qui n'ont pas besoin d'être mis en cache. Les composants spécifiés par l'attribut d'exclusion ne seront pas mis en cache, mais les autres composants seront mis en cache. Par exemple :

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

  Copier après la connexion

  Dans le code ci-dessus, le composant nommé Login ne sera pas mis en cache, mais d'autres composants seront mis en cache. Le composant

2. Events
   keep-alive fournit deux événements pour surveiller le cycle de vie des composants de cache :

• activated : déclenché lorsque le composant est activé. Par exemple :

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

  Copier après la connexion

  Dans le code ci-dessus, lorsque le composant est activé, la méthode handleActivated sera appelée pour imprimer un journal.

• désactivé : déclenché lorsque le composant est désactivé. Par exemple :

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

  Copier après la connexion

  Dans le code ci-dessus, lorsque le composant est désactivé, la méthode handleDeactivated sera appelée pour imprimer un log.

4. Exemple de démonstration
Ci-dessous, nous utilisons un exemple pratique pour démontrer comment utiliser keep-alive pour optimiser les performances de la page.

1. Créez un projet Vue et installez Vue Router :

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

   Copier après la connexion

2. Modifiez le fichier src/App.vue et enveloppez dans la balise le fichier src/router/index.js, ajoutez deux routes, correspondant aux deux composants qui doivent être mis en cache :

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

   Copier après la connexion

3. Créez les composants Home.vue et About.vue dans le répertoire src/views et remplissez le champ content :

   Home.vue :

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;

Copier après la connexion

4. 
   About.vue :

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

   Copier après la connexion
   Jusqu'à présent, nous avons réalisé un exemple simple d'utilisation de keep-alive pour optimiser les performances d'une page.

   Conclusion :

   En utilisant le composant keep-alive de Vue, nous pouvons facilement implémenter la fonction de mise en cache du composant, améliorant ainsi les performances de rendu de la page. Dans les projets réels, certains composants fréquemment consultés et utilisés peuvent être mis en cache selon les besoins pour éviter la création et la destruction répétées de composants et optimiser l'expérience interactive de l'utilisateur. J'espère que cet article vous aidera à comprendre et à utiliser keep-alive !

   Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!