Explication détaillée de l'utilisation de la fonction de cache keep-alive dans vue

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de la fonction keep-alive cache dans Vue. Quelles sont les précautions lors de l'utilisation de la fonction keep-alive cache dans Vue. Vue. Ce qui suit est un cas pratique.

Lorsque nous développons un projet vue, il est inévitable que les données du composant soient rechargées après que la route passe à un autre composant puis revienne. Pour faire face à cette situation, nous devons. utilisez les informations du composant vue en cache keep-alive 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 :

Comment JS stocke les valeurs d'origine et les valeurs de référence

Explication détaillée des fonctions courantes dans JS

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!