Comment implémenter la mise en cache au niveau de la page via le composant keep-alive de Vue

Comment implémenter la mise en cache au niveau des pages via le composant keep-alive de vue

Introduction :
Lors du développement avec Vue, vous rencontrez souvent des situations où vous devez mettre en cache des pages pour améliorer la vitesse de chargement des pages et l'expérience utilisateur. Le composant keep-alive de Vue peut nous aider à implémenter la mise en cache au niveau des pages, afin que certaines pages puissent conserver leur état et leurs données lors du changement. Cet article explique comment utiliser le composant keep-alive de Vue pour implémenter la mise en cache au niveau de la page.

1. Introduction au composant keep-alive
   keep-alive est un composant abstrait fourni par Vue et est utilisé pour mettre en cache d'autres composants. En encapsulant les composants qui doivent être mis en cache dans des balises keep-alive, ces composants peuvent être mis en cache et réutilisés lors du changement.
2. Comment utiliser keep-alive
   L'utilisation du composant keep-alive dans Vue est très simple. Il vous suffit d'ajouter la balise 7c9485ff8c3cba5ae9343ed63c2dc3f7 être mis en cache. Par exemple :

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

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

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

Dans le code ci-dessus, le composant 975b587bf85a482ea10b0a28848e78a4

3. Méthode du cycle de vie keep-alive
   Lors de l'utilisation du composant keep-alive, vous devrez peut-être contrôler le cycle de vie du composant mis en cache. Vue fournit deux fonctions de cycle de vie : activée et désactivée, qui sont utilisées pour contrôler le comportement des composants entre les états de cache et d'activation.

activated : Appelé lorsque le composant est activé, c'est-à-dire lorsqu'il passe du cache à l'état activé.
deactivated : appelé lorsque le composant est mis en cache, c'est-à-dire appelé de l'activation à l'état mis en cache.

Dans le code ci-dessus, nous ajoutons des événements activés et désactivés sur le composant 975b587bf85a482ea10b0a28848e78a4 pour écouter les événements lorsque le composant est activé et mis en cache, et effectuons un traitement logique dans les méthodes correspondantes.


Pages de mise en cache
Lors de l'utilisation du composant keep-alive, nous pouvons contrôler quelles pages sont mises en cache en ajoutant des champs méta à la configuration de routage. Par exemple :

const routes = [
{

<keep-alive>
  <router-view v-on:activated="onActivated"
               v-on:deactivated="onDeactivated">
  </router-view>
</keep-alive>

},

{

onActivated() {
  // 组件被激活时的逻辑处理
},
onDeactivated() {
  // 组件被缓存时的逻辑处理
}

4. }
   ]

Dans le code ci-dessus, nous avons ajouté un champ méta à la page d'accueil et l'avons défini sur keepAlive : true, indiquant dont nous avons besoin pour Cette page est mise en cache ; pour la page À propos, nous définissons keepAlive : false, indiquant qu'elle n'a pas besoin d'être mise en cache.

Ensuite, transmettez le champ méta au composant keep-alive via l'instruction v-bind sur le composant 975b587bf85a482ea10b0a28848e78a4 et utilisez v-if dans le composant keep-alive pour déterminer et mettre en cache les composants qui doivent être mis en cache :

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

path: '/',
name: 'Home',
component: Home,
meta: { keepAlive: true } // 需要进行缓存

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

Dans le code ci-dessus, nous transmettons le champ meta.keepAlive au composant keep-alive via v -bind et utilisez v-if dans le composant keep-alive pour déterminer si le composant cache est nécessaire.

Exemple

Voici un exemple de code simple qui montre comment utiliser le composant keep-alive pour la mise en cache au niveau de la page :

d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

path: '/about',
name: 'About',
component: About,
meta: { keepAlive: false } // 不需要进行缓存

16b28748ea4df4d9c2150843fecfba68

a394d787701f854d2b67d49364703bcc

3f1c4e4b6b16bbbd69b2ee476dc4f83a
5. export default {
   calculé : {

<keep-alive>
  <router-view v-bind:keep-alive="meta.keepAlive"></router-view>
</keep-alive>

}

}
2cacc6d41bbb37262a98f745aa00fbf0

Dans l'exemple ci-dessus, nous obtenons le champ méta correspondant à l'itinéraire actuel via l'attribut calculé et v-bind le transmet au composant keep-alive. De cette manière, le cache de la page peut être contrôlé en fonction du champ méta de la configuration de routage.

Résumé :
Grâce au composant keep-alive de Vue, nous pouvons implémenter la mise en cache au niveau de la page et améliorer la vitesse de chargement des pages et l'expérience utilisateur. Vous pouvez contrôler de manière plus flexible le comportement des composants mis en cache en définissant les composants qui doivent être mis en cache et les méthodes de cycle de vie qui écoutent l'état du cache et d'activation. J'espère que cet article pourra vous aider à comprendre et à appliquer le composant keep-alive de Vue.

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!