Detaillierte Erklärung der Funktion und Verwendung der KeepAlive-Komponente in Vue

Vorwort

Während des Vorstellungsgesprächs erwähnen viele Interviewer möglicherweise Vue, wenn sie fragen: „Wissen Sie, was Keep-Alive macht?“

Keep-Alive ist eine integrierte Komponente von Vue. Die Funktion dieser Komponente besteht darin, inaktive Komponenten zwischenzuspeichern. Wir wissen, dass eine Komponente beim Umschalten im Allgemeinen standardmäßig zerstört wird. Wenn eine Anforderung besteht, wird eine Komponente nach dem Umschalten nicht zerstört, sondern der vorherige Status wird gespeichert. Dann kann Keep-Alive verwendet werden, um Folgendes zu erreichen:

<keep-alive> ist eine integrierte Komponente von Vue, die den Status während des Komponentenwechsels im Speicher behalten kann, um wiederholtes Rendern von DOM zu verhindern.

<keep-alive> Beim Umschließen einer dynamischen Komponente werden inaktive Komponenteninstanzen zwischengespeichert, anstatt zerstört zu werden. Ähnlich wie <transition> ist <keep-alive> eine abstrakte Komponente: Es rendert selbst kein DOM-Element und erscheint auch nicht in der übergeordneten Komponentenkette.

Nachdem ich das Gerüst zum Erstellen eines Projekts verwendet habe, werden zwei Komponenten, „Home“ und „About“, generiert und über das Routing umgeschaltet.

Home-Komponente

<Vorlage>
  <div Klasse="Startseite">
    <Eingabetyp="Text">
  </div>
</Vorlage>

<Skript>
// @ ist ein Alias ​​für /src
importiere HelloWorld aus '@/components/HelloWorld.vue'

Standard exportieren {
  Name: 'Heimat',
  Komponenten:
    Hallo Welt
  }
}
</Skript>

Ich habe ein Eingabefeld in die Home-Komponente geschrieben

Über Komponente

<Vorlage>
  <div Klasse="Über">
    <Eingabetyp="Text">
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name:"Über"
}
</Skript>

Die gleiche About-Komponente enthält auch ein Eingabefeld

Wenn wir etwas in das Eingabefeld der Home-Komponente eingeben, dann zur Info-Komponente wechseln und dann wieder zur Home-Komponente zurückkehren, stellen wir fest, dass der zuvor eingegebene Inhalt gelöscht wurde. Tatsächlich ist es leicht zu verstehen, dass beim Wechsel zur Info-Komponente die Home-Komponente zerstört wird und der Wert des Eingabefelds natürlich gelöscht wird.

Ich habe die zerstörte Lebenszyklusfunktion in der Home-Komponente geschrieben

Beim Wechsel auf die About-Komponente wird das Zerstören der Home-Komponente ausgelöst, also die Home-Komponente zerstört.

Dann können wir die Keep-Alive-Komponente verwenden, um die Router-View-Komponente zu umschließen und die inaktiven Komponenten zwischenzuspeichern.

App-Komponenten

<Vorlage>
  <div id="app">
    <div id="nav">
      <router-link to="/">Zuhause</router-link> |
      <router-link to="/about">Über</router-link>
    </div>
    <am Leben erhalten>
      <Router-Ansicht />
    </am Leben erhalten>
    
  </div>
</Vorlage>

Nach dem Schreiben werden Sie feststellen, dass beim Wechseln zur About-Komponente die Zerstörung in der Home-Komponente nicht ausgelöst wird und der Wert der Home-Komponente ebenfalls gespeichert wird.

Aber das ist definitiv nicht gut. Wir werden feststellen, dass der Wert der About-Komponente ebenfalls zwischengespeichert ist, d. h. alle Routing-Komponenten werden zwischengespeichert, was die Leistung erheblich beeinträchtigt und die Anforderungen nicht erfüllt. Jetzt möchten wir nur die Home-Komponente zwischenspeichern.

Es gibt zwei Eigenschaften für Keep-Alive

Eine Zeichenfolge oder ein regulärer Ausdruck. Nur passende Komponenten werden zwischengespeichert.

• Der Include-Wert ist eine Zeichenfolge oder ein regulärer Ausdruck, der mit dem Komponentennamen übereinstimmt und zwischengespeichert wird.
• Der Ausschlusswert ist eine Zeichenfolge oder ein regulärer Ausdruck, der mit dem Komponentennamen übereinstimmt und nicht zwischengespeichert wird.

Verwenden Sie zunächst „Include“, um den in der Komponente definierten Namen abzugleichen und zwischenzuspeichern.

<keep-alive include="home">
   <Router-Ansicht />
</am Leben erhalten>

Wir werden feststellen, dass home zwischengespeichert wurde, about jedoch nicht

Und Ausschließen ist Ausschließen, das wird nicht demonstriert, es ist sehr einfach, zusätzlich können wir auch das Meta-Attribut in der Route verwenden, um zu steuern

{
      Weg: '/',
      Name: 'Heimat',
      Meta:{
        keepAlive:true
      },
      Komponente: Startseite
    }

Fügen Sie das Attribut „keepAlive“ in den Metadaten der Home-Routing-Regeluhr auf „true“ hinzu, was bedeutet, dass die aktuelle Routing-Komponente zwischengespeichert werden muss

Der Keep-Alive-Code kann mit v-if kombiniert werden, um ihn zu umschließen. Wenn KeepAlive in Meta wahr ist, wird es zwischengespeichert, andernfalls nicht. Dies kann flexibler sein.

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

Auf diese Weise wird das Zwischenspeichern von Komponenten implementiert, es gibt jedoch immer noch einige Probleme. Da die Komponente zwischengespeichert und nicht zerstört wird, wird die Komponente beim Umschalten nicht neu erstellt, und natürlich werden die Lebenszyklusfunktionen wie „Erstellen“ nicht aufgerufen. Daher sollten aktiviert und deaktiviert verwendet werden, um festzustellen, ob die aktuelle Komponente aktiv ist.

Ich habe die aktivierten und deaktivierten Lebenszyklusfunktionen in die Home-Komponente geschrieben

aktiviert(){
    console.log("Oh, du hast mich gesehen")
    console.log("----------aktiviert--------")
  },
  deaktiviert(){
    console.log("Ich hasse es!! Du bist schon wieder gegangen")
    console.log("----------deaktiviert--------")
  }

Ich glaube, Sie können es im obigen GIF deutlich sehen. Zu diesem Zeitpunkt ist Keep-Alive fast abgeschlossen.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Rolle und Verwendung der KeepAlive-Komponente in Vue. Weitere Informationen zur Verwendung der KeepAlive-Komponente in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!