Gibt es einen Caching-Mechanismus in Vue?

Es gibt einen Caching-Mechanismus in Vue, mit dem Sie die umgeschaltete Komponente im Speicher behalten, den Status der Komponente beibehalten oder ein erneutes Rendern vermeiden können Die integrierte Abstraktion von vue-Komponenten wird zum Zwischenspeichern von Komponenten verwendet, um das mehrfache Laden derselben Komponenten zu vermeiden und den Leistungsverbrauch zu reduzieren.

Die Betriebsumgebung dieses Artikels: Windows 10-System, Vue-Version 2.9.6, DELL G3-Computer.

Gibt es einen Caching-Mechanismus in Vue?

Caching, egal ob PC oder Mobilgerät, ist ein unvermeidliches Problem. In Vue gibt es eine KeepAlive-API, die grundsätzlich einige unserer Entwicklungsanforderungen erfüllen kann.

Eine kurze Einführung in Keep-Alive:

1. Behalten Sie die umgeschaltete Komponente im Speicher, wodurch ein erneutes Rendern vermieden und Seiten-Caching implementiert werden kann.

2. , rendert es keine DOM-Elemente selbst und erscheint auch nicht in der übergeordneten Komponentenkette.

3. Wenn eine Komponente innerhalb von umgeschaltet wird, werden ihre beiden Lebenszyklus-Hook-Funktionen, aktiviert und deaktiviert, entsprechend ausgeführt. (Das ist im Grunde nichts)

Hinweis: In 2.2.0 und höheren Versionen werden Aktivierungen und Deaktivierungen in allen verschachtelten Komponenten im -Baum ausgelöst.​ ​

keep-alive ist eine integrierte Komponente von Vue. Wenn es eine dynamische Komponente umschließt, werden inaktive Komponenteninstanzen zwischengespeichert, anstatt sie zu zerstören.

Funktion:

wird zum Zwischenspeichern von Komponenten verwendet, um das mehrfache Laden derselben Komponenten zu vermeiden, den Leistungsverbrauch zu reduzieren und die Benutzererfahrung zu verbessern.

Verwendungsbeispiel:

Verwenden Sie das Keep-Alive-Tag in App.vue, um alle Seiten zwischenzuspeichern.

  <div id="app">
  <keep-alive>
    <tar-bar></tar-bar>
    <div class="container">
      <left-menu></left-menu>
      <Main />
    </div>
    </keep-alive>
  </div>

Einige Seiten zwischenspeichern wird gemeldet; bei direkter Verwendung von „transition-group“ wird ebenfalls ein Fehler gemeldet, und es müssen zwei Übergänge verwendet werden.

【Verwandte Empfehlung: „vue.js Tutorial

“】

Das obige ist der detaillierte Inhalt vonGibt es einen Caching-Mechanismus in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!