Was bedeutet die Vue-Cache-Komponente?

In Vue ist die Cache-Komponente „keep-alive“ und eine abstrakte Komponente. Sie rendert kein DOM-Element selbst und erscheint auch nicht in der übergeordneten Komponentenkette der Komponente. Cache-Komponenten werden hauptsächlich verwendet, um den Komponentenstatus beizubehalten oder ein erneutes Rendern zu vermeiden. Beim Umschließen dynamischer Komponenten werden inaktive Komponenteninstanzen zwischengespeichert, anstatt sie zu zerstören.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

In Vue ist die Cache-Komponente „Keep-Alive“ und eine abstrakte Komponente.

Cache-Komponente „Keep-Alive“

Keep-Alive ist eine integrierte Komponente von Vue. Beim Umschließen dynamischer Komponenten werden inaktive Komponenteninstanzen im Speicher belassen, Anforderungen optimiert und DOM-Neustarts verhindert. Rendering

Offizielle Dokumentation: Keep-Alive für dynamische Komponenten verwenden

wird hauptsächlich verwendet, um den Komponentenstatus beizubehalten oder ein erneutes Rendern zu vermeiden. Wenn dynamische Komponenten umschlossen werden, werden inaktive Komponenteninstanzen zwischengespeichert, anstatt sie zu zerstören.

(1) Der Komponentencache ist nicht dauerhaft, er wird nur nicht erneut gerendert, wenn die Anwendung aktualisiert wird.

(2) ist eine abstrakte Komponente: Sie rendert kein DOM-Element selbst und erscheint auch nicht in der übergeordneten Komponentenkette der Komponente.

(3) Es ist erforderlich, dass die Komponente, zu der gewechselt wird, einen eigenen Namen hat, sei es durch die Namensoption der Komponente oder durch lokale/globale Registrierung.

(4) Komponentenlebenszyklus-Hooks und Caching

(5) Einschluss- und Ausschlussattribute ermöglichen das bedingte Zwischenspeichern von Komponenten. Beide können als durch Kommas getrennte Zeichenfolge, als regulärer Ausdruck oder als Array dargestellt werden.

1038fc66b56645805578e2e786c33093
3a9efc80b00b302f797c801d5f73f956
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

227dbf312b29b2dfafd2902d664cd056
fad9f6a14592db518ac5e95030bbb33d
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

1d733825f9bcc4ef626ba6751304bb79
ebb2d94ca87df38137a52379b8767b08
  559ddfcefaa648fe565e92875a30f7d42724ec0ed5bf474563ac7616c8d7a3cd
76c72b6c0750de65f93a5445ee8cabd8

Die Übereinstimmung überprüft zunächst die eigene Namensoption der Komponente. Wenn die Namensoption nicht verfügbar ist, stimmt sie mit ihrem lokalen Registrierungsnamen überein (dem Schlüsselwert der Komponentenoption der übergeordneten Komponente). Anonyme Komponenten können nicht abgeglichen werden. [Freigabe von Lernvideos: vue-Video-Tutorial, Web-Frontend-Video]

Einige Probleme bei der Verwendung von Cache-Komponenten

Problem 1: Wenn zu viele zwischengespeicherte Komponenten vorhanden sind oder unnötige Komponenten ebenfalls zwischengespeichert werden , führt dies zu einer übermäßigen Speichernutzung.

Problem 2: Es führt dazu, dass Dinge, die aktualisiert werden müssen, zwischengespeichert werden. Wenn beispielsweise die Detailkomponente zwischengespeichert wird, wird sie nicht aktualisiert.

Strategie: Zwischenspeichern wichtiger, hochfrequenter (z. B. Homepage) oder Komponenten, die sich nicht wesentlich ändern.

Lösung: Markieren Sie die Route, die zwischengespeichert werden soll, und entscheiden Sie dann dynamisch, ob sie beim Laden der Route zwischengespeichert werden soll. Präzisere Kontrolle über die zwischenzuspeichernden Komponenten

Optimierte Schreibmethode für das Komponenten-Caching:

Fügen Sie beim Definieren von Routen zusätzliche Routing-[Metainformationen] hinzu, um einige Informationselemente zu ergänzen.

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

Entscheiden Sie, ob Komponenten basierend auf Meta-Metainformationen in app.vue zwischengespeichert werden sollen

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

(Lernvideo-Sharing: Web-Front-End-Entwicklung, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonWas bedeutet die Vue-Cache-Komponente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!