So reduzieren Sie das wiederholte Rendern von Seiten durch die Keep-Alive-Komponente von Vue

So reduzieren Sie das wiederholte Rendern von Seiten durch die Keep-Alive-Komponente von Vue

In Vue.js ist das wiederholte Rendern von Seiten ein häufiges Problem. Wenn wir Seiten wechseln oder zwischen mehreren Komponenten springen, rendert Vue den gesamten Komponentenbaum neu, und dieser Vorgang kann viel Rechenressourcen und Zeit in Anspruch nehmen. Um dieses Problem zu lösen, bietet Vue eine integrierte Komponente namens Keep-Alive, die uns dabei helfen kann, das wiederholte Rendern der Seite zu reduzieren.

Keep-Alive-Komponente ist eine abstrakte Komponente, die von Vue zum Zwischenspeichern zustandsbehafteter Unterkomponenten bereitgestellt wird. Seine Funktion besteht darin, Unterkomponenten zwischenzuspeichern, um zu verhindern, dass sie zerstört und neu erstellt werden, wodurch die Kosten für das wiederholte Rendern der Seite gesenkt werden. Werfen wir einen Blick darauf, wie Sie die Keep-Alive-Komponente verwenden, um die Seitenleistung zu optimieren.

Zuerst müssen wir die Keep-Alive-Komponente in der übergeordneten Komponente verwenden, um die untergeordneten Komponenten einzuschließen, die zwischengespeichert werden müssen. Wir haben beispielsweise eine Unterkomponente namens Home, die wir beim Seitenwechsel zwischenspeichern möchten. Wir können es in eine Keep-Alive-Komponente einbinden, wie unten gezeigt:

<template>
  <keep-alive>
    <Home />
  </keep-alive>
</template>

Als nächstes können wir das Rendering der Seite weiter optimieren, indem wir die Eigenschaften der Keep-Alive-Komponente festlegen. Die Keep-Alive-Komponente stellt Einschluss- und Ausschlussattribute bereit, um anzugeben, welche Komponenten zwischengespeichert werden müssen und welche nicht.

Wenn wir beispielsweise alle Unterkomponenten zwischenspeichern möchten, können wir das Include-Attribut auf „*“ setzen:

<template>
  <keep-alive :include="['*']">
    ...
  </keep-alive>
</template>

Wenn wir nur bestimmte Unterkomponenten zwischenspeichern möchten, können wir das Include-Attribut auf ein Array setzen, das enthält der erforderliche Name der zwischengespeicherten Unterkomponente:

<template>
  <keep-alive :include="['Home', 'About']">
    ...
  </keep-alive>
</template>

Zusätzlich zum Include-Attribut stellt die Keep-Alive-Komponente auch das Exclude-Attribut bereit, mit dem angegeben wird, welche Komponenten nicht zwischengespeichert werden müssen. Ähnlich wie das Include-Attribut kann das Exclude-Attribut auf „*“ gesetzt werden, um alle Komponenten auszuschließen, oder auf ein Array, das die Namen von Unterkomponenten enthält, die nicht zwischengespeichert werden müssen.

Während der Verwendung der Keep-Alive-Komponente können wir auch die von ihr bereitgestellte Hook-Funktion nutzen, um die Darstellung der Seite weiter zu optimieren. Die Keep-Alive-Komponente verfügt über zwei Hook-Funktionen: aktiviert und deaktiviert. Die aktivierte Hook-Funktion wird aufgerufen, wenn die Komponente aktiviert wird, während die deaktivierte Hook-Funktion aufgerufen wird, wenn die Komponente deaktiviert wird.

Wir können in der aktivierten Hook-Funktion eine Logik ausführen, die ausgeführt werden muss, wenn die untergeordnete Komponente durch den Cache aktiviert wird. Beispielsweise können Sie in der aktivierten Hook-Funktion eine Netzwerkanforderung senden, um die Daten der Unterkomponente zu aktualisieren. Ebenso können Sie in der deaktivierten Hook-Funktion eine Logik ausführen, die ausgeführt werden muss, wenn die Unterkomponente deaktiviert ist, z. B. das Löschen zwischengespeicherter Daten usw.

Das Folgende ist ein Beispiel für die Verwendung der aktivierten Hook-Funktion:

<template>
  <keep-alive :include="['Home']">
    <Home />
  </keep-alive>
</template>

<script>
export default {
  components: {
    Home
  },
  activated() {
    // 在子组件被激活时执行的逻辑
    this.$http.get('/api/data')
      .then(response => {
        this.data = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

Durch die Verwendung der Keep-Alive-Komponente können wir das wiederholte Rendern der Seite effektiv reduzieren und die Leistung und Benutzererfahrung der Seite verbessern. Gleichzeitig können wir auch Einschluss- und Ausschlussattribute, Hook-Funktionen und andere Funktionen verwenden, um die Darstellung der Seite weiter zu optimieren. Ich hoffe, dass dieser Artikel Ihnen hilft, die Keep-Alive-Komponente von Vue zu verstehen und zu verwenden.

Das obige ist der detaillierte Inhalt vonSo reduzieren Sie das wiederholte Rendern von Seiten durch die Keep-Alive-Komponente von Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!