Explication détaillée de la façon d'utiliser keep-alive dans vue

Cette fois, je vais vous apporter une explication détaillée de la façon d'utiliser keep-alive dans Vue. Quelles sont les précautions d'utilisation de keep-alive dans Vue Voici un cas pratique, jetons un coup d'oeil.

1. Le rôle et les avantages du keep-alive

Dans les projets liés au commerce électronique, lorsque nous entrons dans la page de liste pour la première fois le moment où j'ai besoin de demander des données. Lorsque j'accède à la page de détails à partir de la page de liste, je dois demander les données même si la page de détails n'est pas mise en cache, puis revenir à la page de liste. À ce stade, nous utilisons keep-alive. pour mettre en cache le composant pour empêcher le rendu secondaire, ce qui permettra d'économiser beaucoup d'argent.

2. Utilisation de base de keep-alive

Dans app.vue

<!-- 缓存所有的页面 -->
<keep-alive>
 <router-view v-if="$route.meta.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keep_alive"></router-view>

Composants qui doivent être mis en cache Le contenu est ajouté directement au routeur :

meta: {
 keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
 }

3. Le cycle de vie du keep-alive

Quand keep-alive est introduit, lorsque la page est saisie pour la première fois, la séquence de déclenchement du hook est créée-> montée-> et désactivée est déclenchée à la sortie. Lors d'une nouvelle saisie (en avant ou en arrière), seule l'activation est déclenchée.

Jetons un coup d'œil aux problèmes d'utilisation et aux solutions de keep-alive dans vue

Description du problème

Dans le développement commercial, il y aura des scénarios dans lesquels l'itinéraire saute mais les données doivent être conservées lors du retour ; vue fournit un maintien en vie pour gérer la

Solution

Retour Le dom ne permet pas son actualisation et une couche est enroulée autour de la vue-view. Lorsque keep-alive est introduit, la page est saisie pour la première fois, la séquence de déclenchement du hook est créée-> -> activé et désactivé est déclenché à la sortie. Lors d'une nouvelle saisie (en avant ou en arrière), seule l'activation est déclenchée.

Les méthodes de montage d'événements, etc., ne sont exécutées qu'une seule fois et sont placées dans les méthodes montées ; les méthodes qui sont exécutées à chaque fois que le composant est entré sont placées dans activé
L'encapsulation du keep-alive peut être configuré ; via les paramètres ;

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" style="min-height:100%"></router-view>
//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 这个路由则显示在上面标签；
//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 这个路由则显示在下面标签；

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 prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser element-ui pour limiter la sélection de date

Comment désinstaller complètement Node et NPM sur Mac

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!