Comment utiliser la fonction de cache keep-alive

Cette fois, je vais vous montrer comment utiliser la fonction keep-alivecaching et quelles sont les précautions d'utilisation de la fonction keep-alive cache. Ce qui suit est un cas pratique. . Jetons un coup d'oeil.

Vue implémente la mise en cache des informations sur les composants

Lorsque nous développons un projet Vue, nous ne pouvons pas éviter de passer à d'autres composants dans le routage Le composant les données seront rechargées après leur retour. Pour faire face à cette situation, nous devons utiliser keep-alive pour mettre en cache les informations du composant vue afin qu'elles ne soient pas rechargées.

1. Dans app.vue

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

Mais dans ce cas, tous les composants seront mis en cache et ne pourront pas atteindre un seul composant. effet.

Ensuite, nous ajoutons le regroupement des composants. La méthode d'implémentation est la suivante :

dans app.vue

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>
<!-- 这里不会被keepAlive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

2. Dans la page de routage index.js

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}

Cela réalise la fonction de mise en cache de certains composants

Si le composant mis en cache souhaite effacer les données ou exécuter l'initialisation La méthode appelle la fonction hook activée

lors du chargement du composant, comme suit :

activated: function () {
  this.data = ‘'
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres sites Web chinois php.

Lecture recommandée :

L'utilisation et la différence entre calculé et méthodes dans Vue.js

Explication détaillée des étapes utiliser js-cookie

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!