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.

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[&#39;a&#39;, &#39;b&#39;]">
  <component :is="view"></component>
</keep-alive>

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!