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.

1038fc66b56645805578e2e786c33093
3a9efc80b00b302f797c801d5f73f956
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

227dbf312b29b2dfafd2902d664cd056
fad9f6a14592db518ac5e95030bbb33d
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

1d733825f9bcc4ef626ba6751304bb79
ebb2d94ca87df38137a52379b8767b08
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

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!