Beispiel für die Verwendung der in Vue integrierten Komponente „Keep-Alive“

Keep-Alive ist eine der integrierten Komponenten von Vue und wird hauptsächlich verwendet, um den Komponentenstatus beizubehalten oder ein erneutes Rendern zu vermeiden.

Wirkung

Behalten Sie den Status während des Komponentenwechsels im Speicher, um wiederholtes DOM-Rendering zu verhindern, die Ladezeit und den Leistungsverbrauch zu reduzieren und das Benutzererlebnis zu verbessern.

1. Verwendung von Keep-Alive

Wenn <keep-alive> um eine dynamische Komponente gewickelt ist, werden inaktive Komponenteninstanzen zwischengespeichert, anstatt zerstört zu werden.
Ähnlich wie <transition> ist <keep-alive> eine abstrakte Komponente: Es rendert selbst kein DOM-Element und erscheint auch nicht in der übergeordneten Komponentenkette der Komponente.

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

Requisiten:

include – eine Zeichenfolge oder ein regulärer Ausdruck. Es werden nur Komponenten mit übereinstimmenden Namen zwischengespeichert.
ausschließen – eine Zeichenfolge oder ein regulärer Ausdruck. Komponenten mit übereinstimmenden Namen werden nicht zwischengespeichert.
max: eine Zahl. Die maximale Anzahl von Komponenteninstanzen, die zwischengespeichert werden können.

• Einschließen und Ausschließen

Wenn Sie nur den Status einiger Komponenten zwischenspeichern möchten, können Sie die Include-Eigenschaft verwenden.

Wenn Sie einige Komponenten ausschließen möchten, sodass andere zwischengespeichert werden, verwenden Sie das Ausschlussattribut.

• max
  

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>

Anwendungsbeispiel:

1. Alle Seiten zwischenspeichern:

<am Leben erhalten>
    <Router-Ansicht></Router-Ansicht>
    <!--Hier sind die Komponenten, die zwischengespeichert werden-->
</am Leben erhalten>

2. Einige Seiten je nach Bedingungen zwischenspeichern

(Weitere Informationen zur Verwendung finden Sie auf der offiziellen API-Website.)

<Vorlage>
  <div id="app">
  	// 1. Cache-Komponenten mit dem Namen newsList oder productList <keep-alive include='newsList,productList'>
         <Router-Ansicht/>
      </am Leben erhalten>
	
	// 2. Die Komponente mit dem Namen „Test“ wird nicht zwischengespeichert <keep-alive exclude='test'>
  	  <Router-Ansicht/>
	</am Leben erhalten>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>

Beachten:

Es gibt noch einen weiteren Schritt. Sie müssen der Komponente im Skriptabschnitt der Komponente, deren Status zwischengespeichert werden muss, ein Namensattribut hinzufügen. Wenn Sie keine Keep-Alive-Cache-Komponenten verwenden, müssen Sie das Namensattribut nicht schreiben. Wenn jedoch Keep-Alive zum Zwischenspeichern des Komponentenstatus verwendet wird, muss diese Komponente über diese Eigenschaft verfügen. Darüber hinaus muss der Wert dieses Attributs exakt mit dem Wert des Include-Attributs im Tag übereinstimmen, einschließlich Groß- und Kleinschreibung. Nehmen Sie die Komponente productList.vue als Beispiel

<Vorlage>
    <!-- Hier ist die HTML-Struktur der Komponente „productList“-->
</Vorlage>
<Skript>
Standard exportieren {
    Name: "productList", //Wenn Keep-Alive zum Zwischenspeichern des Komponentenstatus verwendet wird, muss diese Komponente über dieses Attribut verfügen.
    Daten(){
        zurückkehren {}
    }
</Skript>

3. Kombinieren Sie Vue-Router, um einige Seiten zwischenzuspeichern

exportiere standardmäßig einen neuen Router({
  Modus: "Verlauf",
  Routen: [
    {
      Weg: '/',
      Name: 'Heimat',
      Komponente: Home,
      Kinder: [
        {
          Pfad: "Produkte",
          Name: "Produkte",
          Komponente: Produkte,
          Meta: {
        	keepAlive: true // Caching erforderlich }
        },
        {
          Pfad: 'newsDetails',
          Name: 'newsDetails',
          Komponente: newsDetails,
          Meta: {
        	keepAlive: false // Kein Caching erforderlich }
        }
      ]
    }
  ]
})

In App.vue

<Vorlage>
  <div id="app">
    <am Leben erhalten>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </am Leben erhalten>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>

2. Keep-Alive-Lebenszyklus

Die in Keep-Alive erstellten Komponenten haben zwei weitere Lebenszyklus-Hooks: aktiviert und deaktiviert.

1. aktiviert

Wird aufgerufen, wenn die Keep-Alive-Komponente aktiviert wird.

Dies wird beim ersten Rendern der Komponente aufgerufen und dann jedes Mal, wenn die zwischengespeicherte Komponente aktiviert wird.

Das erste Mal, wenn Sie eine zwischengespeicherte Route/Komponente eingeben, nach der Bereitstellung, bevor der Schutz „beforeRouteEnter“ aufgerufen wird, bevor die Rückruffunktion an „next“ übergeben wird:

Beim ersten Aufrufen der Seite lautet die Reihenfolge der Hook-Auslösung: erstellt->montiert->aktiviert

Da die Komponente zwischengespeichert ist, werden diese Hooks beim erneuten Aufrufen der Cache-Route/-Komponente nicht ausgelöst:

„beforeCreate erstellt“ und „beforeMount gemountet“ wird nicht ausgelöst.

2. deaktiviert

Wird aufgerufen, wenn die Keep-Alive-Komponente deaktiviert wird (die Route verlässt).

Wenn Keep-Alive verwendet wird, werden beforeDestroy (Hook vor Komponentenzerstörung) und destroy (Komponentenzerstörung) nicht aufgerufen, da die Komponente nicht zerstört, sondern zwischengespeichert wird.

Dieser Hook kann als Ersatz für beforeDestroy angesehen werden. Wenn Sie eine Komponente zwischenspeichern und etwas tun möchten, wenn die Komponente zerstört wird, können Sie es in diesen Hook einfügen.

Beachten:

1. Durch die Verwendung von Keep-Alive bleiben die Daten im Speicher. Wenn Sie bei jedem Aufrufen der Seite die neuesten Daten abrufen möchten, müssen Sie die Daten in der aktivierten Phase abrufen und die Aufgabe des Abrufens der Daten in der ursprünglichen Hook-Funktion zum Erstellen übernehmen.

2. Diese beiden Lebenszyklusfunktionen werden nur aufgerufen, wenn die Komponente in Keep-Alive gekapselt ist. Bei Verwendung als normale Komponente werden sie nicht aufgerufen. Nach Version 2.1.0 werden diese beiden Hook-Funktionen nach der Verwendung von Exclude auch dann nicht aufgerufen, wenn es in Keep-Alive gekapselt ist!

3. Die beiden oben genannten Hook-Funktionen werden während des serverseitigen Renderings nicht aufgerufen.

Siehe die offizielle Dokumentation: cn.vuejs.org/v2/api/#kee…

Oben finden Sie ein ausführliches Anwendungsbeispiel für die in Vue integrierte Keep-Alive-Komponente. Weitere Informationen zur in Vue integrierten Keep-Alive-Komponente finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!