Eine kurze Zusammenfassung von Vue Keep-Alive

1. Funktion

Wird hauptsächlich verwendet, um den Komponentenstatus beizubehalten oder ein erneutes Rendern zu vermeiden.

2. Nutzung

<keep-alive> Beim Umschließen einer dynamischen Komponente werden inaktive Komponenteninstanzen zwischengespeichert, anstatt zerstört zu werden.

<keep-alive> ist eine abstrakte Komponente: Sie rendert selbst kein DOM-Element und erscheint auch nicht in der übergeordneten Kette der Komponente.

Wenn eine Komponente innerhalb von <keep-alive> umgeschaltet wird, werden ihre aktivierten und deaktivierten Lifecycle-Hook-Funktionen entsprechend ausgeführt.

3. Requisiten

enthalten

include – eine Zeichenfolge oder ein regulärer Ausdruck. Es werden nur Komponenten mit übereinstimmenden Namen zwischengespeichert.

ausschließen

ausschließen – eine Zeichenfolge oder ein regulärer Ausdruck. Komponenten mit übereinstimmenden Namen werden nicht zwischengespeichert.

Mit den Include- und Exclude-Eigenschaften können Komponenten bedingt zwischengespeichert werden. Beide können als Komma-getrennte Zeichenfolge, regulärer Ausdruck oder Array ausgedrückt werden:

<!-- Durch Komma getrennte Zeichenfolge -->
<keep-alive include="a,b">
 <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

<!-- Regulärer Ausdruck (mit `v-bind`) -->
<keep-alive :include="/a|b/">
 <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

<!-- Array (mit `v-bind`) -->
<keep-alive :include="['a', 'b']">
 <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

Die Übereinstimmung wird zunächst mit der eigenen Namensoption der Komponente oder, falls diese nicht verfügbar ist, mit ihrem lokal registrierten Namen (dem Wert des Komponentenoptionsschlüssels der übergeordneten Komponente) überprüft. Anonyme Komponenten können nicht zugeordnet werden.

max

max: eine Zahl. Die maximale Anzahl von Komponenteninstanzen, die zwischengespeichert werden können.

Sobald diese Zahl erreicht ist, wird die zwischengespeicherte Komponenteninstanz, auf die am längsten nicht zugegriffen wurde, zerstört, bevor eine neue Instanz erstellt wird.

<am Leben erhalten :max="10">
 <Komponente: ist = "Ansicht"></Komponente>
</am Leben erhalten>

Das Obige ist eine kurze Analyse der Details von Keep-Alive in Vue. Weitere Informationen zu Keep-Alive in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!