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

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

Dans le développement de Vue, l'optimisation des performances des pages est une tâche très importante. Parmi eux, l'utilisation du composant keep-alive de Vue peut améliorer considérablement les performances et l'expérience utilisateur de la page. Cet article explique comment utiliser keep-alive pour optimiser les performances des pages et fournit des exemples de code spécifiques.

1. Qu'est-ce que keep-alive
keep-alive est un composant abstrait fourni par Vue, qui peut mettre en cache des composants au lieu de les recréer et de les détruire à chaque fois. keep-alive a les caractéristiques suivantes :

1. Lorsqu'un composant est commuté dans keep-alive, son état sera conservé. Par exemple, les données des composants, l'état du DOM, etc. seront conservées.
2. keep-alive peut mettre en cache sélectivement les composants via des attributs d'inclusion et d'exclusion.
3. keep-alive utilise le mécanisme de cache LRU (Last Récemment utilisé). Lorsque le nombre de caches atteint le maximum, les composants qui n'ont pas été utilisés depuis le plus longtemps seront détruits.

2. Utilisez keep-alive pour optimiser les performances de la page

1. Dans App.vue, enveloppez les composants qui doivent être mis en cache dans la balise Par exemple :

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

   Dans l'exemple ci-dessus, est un espace réservé pour la commutation de routage à l'aide de Vue Router. Il peut être remplacé par un composant qui doit être mis en cache en fonction de la situation réelle.

2. Dans un composant qui doit être mis en cache, vous pouvez le marquer comme composant qui doit être mis en cache en ajoutant l'attribut keep-alive. Par exemple :

   <template>
     <div>
    <h1 id="Home">Home</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Home',
     // 在组件中添加keep-alive属性
     keep-alive: true,
   }
   </script>

   Dans l'exemple ci-dessus, marquez le composant Home comme un composant qui doit être mis en cache, de sorte que lors du passage à d'autres routes puis du retour à la route Home, l'état du composant Home soit conservé.

3. En plus de mettre en cache l'intégralité du composant, nous pouvons également mettre en cache sélectivement les composants via l'attribut cache. Par exemple, mettez en cache uniquement les composants qui remplissent les conditions :

   <template>
     <div>
    <h1 id="Product">Product</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'Product',
     // 只有当id为1或2时才缓存组件
     cache: (route) => route.params.id === '1' || route.params.id === '2',
   }
   </script>

   Dans l'exemple ci-dessus, le composant Product ne sera mis en cache que lorsque le paramètre id dans la route est 1 ou 2, et sera détruit dans les autres cas.

3. Notes

1. keep-alive ne fonctionne que lors de l'utilisation de Vue Router pour le changement d'itinéraire. Si Vue Router n'est pas utilisé dans la page, keep-alive n'aura aucun effet.

2. La quantité de cache du composant keep-alive est illimitée par défaut et la quantité maximale de cache peut être définie via l'attribut max. Par exemple :

   <keep-alive max="5">
     <router-view></router-view>
   </keep-alive>

   Dans l'exemple ci-dessus, le numéro de cache maximum est fixé à 5. Lorsqu'il y a plus de 5 composants de cache, le composant qui n'a pas été utilisé depuis le plus longtemps sera détruit.

Résumé : En utilisant le composant keep-alive de Vue, vous pouvez efficacement mettre en cache les composants, réduire la consommation de mémoire et améliorer les performances des pages. Dans les applications pratiques, il est nécessaire de choisir une stratégie de mise en cache des composants appropriée en fonction des caractéristiques et des besoins de la page.

J'espère que cet article vous aidera à utiliser keep-alive pour optimiser les performances de la page. Si vous avez des questions, veuillez laisser un message pour communiquer.

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!