Detaillierte Erklärung der KeepAlive-Verwendung in der Vue-Frontend-Entwicklung

Vorwort

Keep-Alive ist eine integrierte Komponente von Vue. Wenn es um eine dynamische Komponente gewickelt wird, speichert es inaktive Komponenteninstanzen im Cache, anstatt sie zu zerstören.

Während des Komponentenwechsels bleibt der Status im Speicher erhalten, um wiederholtes DOM-Rendering zu verhindern, Ladezeit und Leistungsverbrauch zu reduzieren und das Benutzererlebnis zu verbessern. Anwendung

<am Leben erhalten>
    <Komponente />
</am Leben erhalten>

Die Komponente hier wird zwischengespeichert.

Keep-Avlive-Hook-Funktion

Im Keep-Alive-Modus erstellte Komponenten verfügen über zwei weitere Lebenszyklus-Hooks: aktiviert und deaktiviert. aktiviert: Wird aufgerufen, wenn die Keep-Alive-Komponente aktiviert wird. Keep-Alive hält die Daten im Speicher. Wenn Sie bei jedem Aufruf 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.
deaktiviert: wird aufgerufen, wenn die Keep-Alive-Komponente deaktiviert wird. Wenn Keep-Alive verwendet wird, werden die Hooks beforeDestory und destroy nicht aufgerufen, da die Komponente nicht zerstört, sondern zwischengespeichert wird. Daher kann der deaktivierte Hook als Ersatz für beforeDestory und destroy angesehen werden, z. B. zum Löschen von localStorge-Daten.

keep-avlive speichert welche Komponenten

Es gibt zwei Möglichkeiten, Komponenten in Keep-Avlive zwischenzuspeichern. Eine besteht darin, die von der Keep-Avlive-Komponente bereitgestellten Einschluss- und Ausschlusseigenschaften zu verwenden, um die entsprechenden Komponenten über Parameter für das Zwischenspeichern abzugleichen. Die andere besteht darin, das Metaattribut in der Route festzulegen.
Verwenden von Einschluss- und Ausschlusseigenschaften zum Vervollständigen der Cache-Komponenteneinstellungen

/* Zwischenspeichert die Komponente mit dem Namen „Test“*/
<keep-alive include='test'>
      <Router-Ansicht/>
</am Leben erhalten>

Verwenden Sie „Include“, um die Komponente mit dem Namen „Test“ zwischenzuspeichern.

<keep-alive exclude="test"> 
  <Router-Ansicht/>
</am Leben erhalten>

Durch die Verwendung von „Ausschließen“ wird die Komponente mit dem Namen „Test“ nicht zwischengespeichert.
Verwenden Sie das Metaattribut in der Route, um die Cache-Komponente festzulegen, z. B.

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

Die Warenkomponente muss zwischengespeichert werden, Bewertungen jedoch nicht. Verwenden Sie die folgende Anweisung, um die Komponenten-Cache-Einstellung dynamisch zu vervollständigen. Der Einstellungscode lautet wie folgt

<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>

Beispiel

Richten Sie zwei Komponenten ein: KeepCom1 und KeepCom2. Legen Sie den Cache für KeepCom1 fest und legen Sie den Cache für KeepCom2 nicht fest. Testen Sie die gleichzeitige Verwendung von zwei Hook-Funktionen. Hier werden Routing-Metadaten verwendet, um die Einstellung von Cache-Komponenten zu implementieren.
Der KeepCom1-Code lautet wie folgt:

<Vorlage>
  <div Klasse="Wrapper">
    <ul Klasse="Inhalt"></ul>
    <button class="add" id="add" @click="add">Untergeordnetes Element hinzufügen</button>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'keepCom1',
  Methoden: {
    hinzufügen () {
      let ul = document.getElementsByClassName('Inhalt')[0]
      let li = document.createElement('li')
      li.innerHTML = 'Ich füge ein Element hinzu'
      ul.appendChild(li)
    }
  },
  aktiviert () {
    console.log('Cache aktivierte Ausführung')
  },
  deaktiviert () {
    console.log('Cache deaktiviert Ausführung')
  }
}
</Skript>
<Stil>
</Stil>

Der KeepCom2-Code lautet wie folgt:

<Vorlage>
  <div Klasse="Wrapper">
    <ul Klasse="Inhalt"></ul>
    <button class="add" id="add" @click="add">Untergeordnetes Element hinzufügen</button>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: 'keepCom2',
  Methoden: {
    hinzufügen () {
      let ul = document.getElementsByClassName('Inhalt')[0]
      let li = document.createElement('li')
      li.innerHTML = 'Ich füge ein Element hinzu'
      ul.appendChild(li)
    }
  },
  aktiviert () {
    console.log('Cache aktivierte Ausführung')
  },
  deaktiviert () {
    console.log('Cache deaktiviert Ausführung')
  }
}
</Skript>
<Stil>
</Stil>

Die Codes von KeepCom1 und KeepCom2 sind grundsätzlich gleich und dienen zum Hinzufügen von Knoten zur Seite.
Der Code von keepAvliveTest lautet wie folgt

<Vorlage>
  <div align="center" style="margin-top: 20px;">
    <router-link to="/keepAvliveTest/keepcom1">Cache verwenden</router-link>
    <router-link to="/keepAvliveTest/keepcom2">Keinen Cache verwenden</router-link>
    <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: "keepAvliveTest"
}
</Skript>
<Stil>
</Stil>

Schließen Sie den Wechsel zwischen den Komponenten keepcom1 und keepcom2 ab. Das Ergebnis nach der Ausführung ist

keepcom1 verwendet den Cache. Beim Seitenwechsel sind die drei zuletzt hinzugefügten Elemente noch vorhanden und die Hook-Funktion wird ausgeführt. Keepcom2 verwendet keinen Cache. Beim Seitenwechsel ist ein zuletzt hinzugefügtes Element nicht mehr vorhanden und wird in seinen ursprünglichen Zustand zurückversetzt. Und beide Hooks werden nicht ausgeführt.

Zusammenfassung und Hinweise

Beim Einrichten von Seiten, die zwischengespeichert werden müssen, empfiehlt sich die Verwendung des Meta-Tags im Router, damit der Code weniger gekoppelt ist. keep-alive gleicht zuerst das Namensfeld der eingebundenen Komponente ab. Wenn der Name nicht verfügbar ist, gleicht es den registrierten Namen in der Komponentenkonfiguration der aktuellen Komponente ab. In Keep-Alive enthalten, erfüllt aber Ausschluss, aktiviert und deaktiviert werden nicht aufgerufen

Oben finden Sie den detaillierten Inhalt der ausführlichen Erklärung zur Verwendung von KeepAlive bei der Vue-Frontend-Entwicklung. Weitere Informationen zum Vue-Frontend finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!