keep-alive Vue est intégrée dans les composants, quand il est enveloppé de composants dynamiques, les instances de composant sont mises en cache inactifs, plutôt que de les détruire.
Et même TRANSITION, keep-alive est un élément abstrait, ne se rend pas dans un élément DOM, il ne sera pas apparaître dans la chaîne des composants parents.
rôle:
Dans l'état de l'ensemble des restes de processus de commutation dans la mémoire, ce qui rend la duplication prevent DOM, pour réduire le temps de chargement et le rendement de la consommation, et l'amélioration de la résistance à l'expérience de l'utilisateur.
principe:
- Lors de sa création exigera des noeuds DOM cache virtuels stockés dans this.cache en;
- Lorsque rendu le rendu des pages, si le nom des conditions MEET cache DOM virtuels (peut être utilisé inclure, exclure le contrôle), sera rendu à partir du cache avant que les exemples retirés this.cache;
paramètres:
- comprennent: le composant peut être une chaîne ou une expression régulière, le nom correspondant sera mis en mémoire cache;
- ne comprend pas: peut être une chaîne ou une expression régulière, le nom des composants incompatibles sont mises en cache;
exclure une plus grande priorité qu'inclure.
- max: figures, peuvent être mises en mémoire cache le nombre maximal d'instance de composant;
crochet Cycle de vie:
composants contenus créés dans le keep-alive, la déclaration sera plus de deux périodes: activée et désactivée.
- activé: appelé lors de l'activation du composant. Seront également appelé lorsque le composant est d'abord rendu, chaque appel est activé après le keep-alive.
- désactivé: Appelé lorsque le composant est désactivé.
Après l'introduction de keep-alive, dans l'ensemble pour la première fois, ce qui déclenche les crochets de commande sont: créé-> activé monté, déclenchement désactivé lorsque vous quittez. Lorsque vous entrez à nouveau, seul déclencheur activé.
<keep-alive include="test-keep-alive">
<!-- 将缓存name为test-keep-alive的组件 -->
<component></component>
</keep-alive>
Composants dynamiques:
Alors que plusieurs composants utilisent le même point de montage et la commutation dynamique, qui est les composants dynamiques.
Le point de montage est l'étiquette.
En utilisant le réservé <component>élément est lié dynamiquement à ses caractéristiques, elle peut être composante dynamique.
<div id="app">
<component is="one"></component>
</div>
new Vue({
el: '#app',
components: {
one: {template: '<div>我是线路一</div>'},
two: {template: '<div>我是线路二</div>'},
thr: {template: '<div>我是线路三</div>'}
}
})
