Implementierung der Keep-Alive-Cache-Funktion von Vue

Dieser Artikel stellt hauptsächlich die Implementierung der Keep-Alive-Cache-Funktion von Vue vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Vue implementiert das Caching von Komponenteninformationen

Wenn wir ein Vue-Projekt entwickeln, ist es unvermeidlich, dass die Komponentendaten verloren gehen, nachdem die Route auf andere Komponenten umgestellt wurde und dann zurückgeladen. Um mit dieser Situation umzugehen, müssen wir Keep-Alive verwenden, um die Komponenteninformationen von vue zwischenzuspeichern, damit sie nicht neu geladen werden.

1. In app.vue

<keep-alive>
  <router-view></router-view>
</keep-alive>

Aber in dieser Situation werden alle Komponenten zwischengespeichert Der Effekt des Zwischenspeicherns einer einzelnen Komponente kann nicht erreicht werden.

Dann fügen wir einige Komponenten hinzu und die Implementierungsmethode ist wie folgt:

in app.vue

<!--这里是需要keepalive的-->
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
<keep-alive>

<!-- 这里不会被keepAlive -->

<router-view v-if="!$route.meta.keepAlive"></router-view>

2. Auf der index.js-Seite der Route

{
  path: '',
  name: '',
  component: '',
  meta: {keepAlive: true}   // 这个是需要keepalive的
}，
{
  path: '',
  name: '',
  component: ,
  meta: {keepAlive: false}  // 这是不会被keepalive的
}

Dadurch wird die Caching-Funktion einiger Komponenten realisiert

Wenn die zwischengespeicherte Komponente Daten löschen oder eine Initialisierungsmethode durchführen möchte, rufen Sie beim Laden der Komponente die aktivierte Hook-Funktion wie folgt auf:

activated: function () {
  this.data = ‘'
}

Das Obige habe ich für alle zusammengestellt und hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Ein sehr praktisches Ajax-Benutzerregistrierungsmodul

Ajax-Klick zum kontinuierlichen Laden der Datenliste (Grafik). Tutorial)

Ajax+Struts2 implementiert die Verifizierungscode-Verifizierungsfunktion (Bild- und Text-Tutorial)

Das obige ist der detaillierte Inhalt vonImplementierung der Keep-Alive-Cache-Funktion von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!