Que signifie le composant de cache vue ?

Dans Vue, le composant cache est "keep-alive" et est un composant abstrait ; il ne restituera pas un élément DOM par lui-même et n'apparaîtra pas non plus dans la chaîne de composants parent du composant. Les composants de cache sont principalement utilisés pour préserver l'état des composants ou éviter le nouveau rendu. Lorsqu'ils encapsulent des composants dynamiques, ils mettent en cache les instances de composants inactives au lieu de les détruire.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

En vue, le composant cache est "keep-alive" et est un composant abstrait.

Composant de cache "keep-alive"

keep-alive est un composant intégré de Vue Lors de l'encapsulation des composants dynamiques, il laissera les instances de composants inactives en mémoire, optimisera les requêtes et empêchera la ré-activation du DOM. rendu

Documentation officielle : Utilisation de keep-alive sur les composants dynamiques

est principalement utilisée pour conserver l'état des composants ou éviter un nouveau rendu, lorsqu'il enveloppe les composants dynamiques, il met en cache les instances de composants inactifs au lieu de les détruire.

(1) Le cache des composants n'est pas persistant. Il ne s'affiche tout simplement pas pendant l'exécution de l'application. Si la page est actualisée, elle reviendra toujours à son état initial.

(2) est un composant abstrait : il ne restitue pas un élément DOM par lui-même et n'apparaît pas non plus dans la chaîne de composants parent du composant.

(3) Il est nécessaire que le composant vers lequel vous basculez ait son propre nom, que ce soit via l'option de nom du composant ou un enregistrement local/global.

(4) Hooks du cycle de vie des composants et mise en cache

(5) Les attributs d'inclusion et d'exclusion permettent aux composants d'être mis en cache de manière conditionnelle. Les deux peuvent être représentés sous forme de chaîne séparée par des virgules, d’expression régulière ou de tableau.

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component>
</keep-alive>

La correspondance vérifie d'abord la propre option de nom du composant, et si l'option de nom n'est pas disponible, correspond à son nom d'enregistrement local (la valeur clé de l'option de composants du composant parent). Les composants anonymes ne peuvent pas être mis en correspondance. [Partage vidéo d'apprentissage : tutoriel vidéo vue, vidéo frontale Web]

Quelques problèmes avec l'utilisation des composants de cache

Problème 1 : s'il y a trop de composants en cache ou si des composants inutiles sont également mis en cache , cela entraînera une utilisation excessive de la mémoire.

Problème 2 : les éléments qui doivent être mis à jour seront mis en cache. Par exemple, si le composant de détail est mis en cache, il ne sera pas mis à jour.

Stratégie : mettez en cache les composants importants, à haute fréquence (comme la page d'accueil) ou qui ne changent pas beaucoup.

Solution : marquez l'itinéraire à mettre en cache, puis décidez dynamiquement de le mettre en cache lors du chargement de l'itinéraire. Contrôle plus précis des composants à mettre en cache

Méthode d'écriture optimisée pour la mise en cache des composants :

Lors de la définition des itinéraires, ajoutez un routage supplémentaire [méta-information] pour compléter certains éléments d'information.

{ 
  path: '/', 
  component: () => import('../views/home/index.vue'), 
  //是否缓存
  meta: { isKeepAlive: true } 
},

Déterminez s'il faut mettre en cache les composants en fonction des méta-informations méta dans app.vue

<div id="app">
  <keep-alive>
    <router-view v-if="$route.meta.isKeepAlive"/>
  </keep-alive>
  <router-view v-if="!$route.meta.isKeepAlive"/>
</div>

(Partage de vidéos d'apprentissage : développement web front-end, Vidéo de programmation de base)

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!