Beispiel für die Verwendung einer Keep-Alive-Komponente in Vue

Problembeschreibung (was ist Keep-Alive)

• Keep-Alive: Wie der Name schon sagt: Bleiben Sie aktiv. Wer bleibt aktiv?
• Zunächst einmal wissen wir, dass eine Vue-Datei eine Komponente ist, da es sich bei Vue um eine komponentenbasierte Programmierung handelt. Wie bei allem anderen gibt es einen Lebenszyklus von der Geburt bis zum Tod. Dasselbe gilt für Vue-Komponenten, die ebenfalls ihren eigenen Lebenszyklus haben, z. B. „Erstellen“, um Komponenten zu erstellen, „Mounten“, um Daten an Komponenten anzuhängen, „Aktualisieren“, um die an Komponenten angehängten Daten zu aktualisieren, und „Zerstören“, um Komponenteninstanzen zu zerstören.
• Die Verwendung von Keep-Alive dient also dazu, die Komponente aktiv zu halten und sie nicht durch Destroy zu zerstören, sodass sie immer aktiv bleibt. Wenn die Komponente nicht zerstört wird, sind die auf der Komponente gemounteten Daten weiterhin vorhanden, sodass der Status beibehalten werden kann. Daher kann Keep-Alive den Status der Komponente aufrechterhalten.
  

Es gibt auch ein Keep-Alive im Anforderungsheader des http-Protokolls, um den http-Aufruf wie folgt aufrechtzuerhalten: Verbindung: Keep-Alive Obwohl die Funktionen unterschiedlich sind, ist die Idee dieselbe, nämlich den Status aktiv zu halten

Eine kleine Demo, um die Wirkung von Keep-Alive zu sehen

Die Demo ist in den Routing-Navigationsteil oben und den Inhaltsbereichsteil unten unterteilt. Klicken Sie oben auf die Routennavigation, und die Routenansicht rendert die entsprechende Routenkomponente. Das Wirkungsdiagramm sieht wie folgt aus:

Wirkungsdiagramm ohne Keep-Alive

Entsprechender Code

// #App.vue in <template>
  <div Klasse="Box">
    <!-- Routennavigation-->
    <div Klasse="nav">
      <router-link to="/">Zur Startseite</router-link>
      <router-link to="/about">Zur Infoseite</router-link>
      <router-link to="/detail">Zur Detailseite</router-link>
    </div>
    <!-- Inhaltsbereich entsprechend der Routennavigation-->
    <Haupt>
      <Router-Ansicht></Router-Ansicht>
    </main>
  </div>
</Vorlage>

// Platzieren Sie in home.vue ein Kontrollkästchen <el-checkbox v-model="checked">Optionen</el-checkbox>

// Platzieren Sie in about.vue ein Eingabefeld <el-input v-model="input" placeholder="Bitte geben Sie Inhalt ein"></el-input>

// Eine Dropdown-Box in detail.vue <el-select v-model="value" placeholder="Bitte auswählen">
  <el-Option
    v-for="Element in Optionen"
    :Schlüssel="Artikel.Wert"
    :label="Artikel.label"
    :Wert="Artikel.Wert"
  >
  </el-Option>
</el-Auswahl>

analysieren

• Wir haben festgestellt, dass wir, wenn wir die Keep-Alive-Komponente nicht zum Umschließen der Router-View-Komponente verwendet haben, links die Startseite überprüft, die Informationen auf der Infoseite eingegeben und die Informationen per Dropdown-Menü auf der Detailseite ausgewählt haben. Als wir die Routing-Seite verließen und zurückkamen, stellten wir fest, dass die Vorgänge, die wir zuvor ausgeführt hatten, wie z. B. das Überprüfen, Eingeben und Auswählen der Informationen per Dropdown-Menü, nicht mehr vorhanden waren und der vorherige Status verschwunden war. Der Grund ist ganz einfach. Wenn Sie die Routing-Seite verlassen, wird die Destroy-Hook-Methode der Komponente ausgelöst, die der Routing-Seite entspricht, und dann wird die Komponente zerstört, die der Routing-Seite entspricht. Wenn die Komponente zerstört wird, sind die auf der Komponente gemounteten Daten verloren.
• Gleichzeitig können wir in den Vue.js-Devtools rechts sehen, dass die Ansichtsebene von Router-View immer zwischen den Komponenten Home, About und Detail hin- und herschaltet. Das Hin- und Herschalten von Komponenten ist eigentlich der Prozess der kontinuierlichen Erstellung und Zerstörung von Komponenten. Als nächstes schauen wir uns die Auswirkungen der Verwendung von Keep-Alive an.
  

Wirkungsdiagramm der Verwendung von Keep-Alive

Entsprechender Code

<Vorlage>
  <div Klasse="Box">
    <!-- Routennavigation-->
    <div Klasse="nav">
      <router-link to="/">Zur Startseite</router-link>
      <router-link to="/about">Zur Infoseite</router-link>
      <router-link to="/detail">Zur Detailseite</router-link>
    </div>
    <!-- Inhaltsbereich entsprechend der Routennavigation-->
    <Haupt>
      <keep-alive> <!-- Umschließen Sie es mit keep-alive und Sie können es zwischenspeichern -->
        <Router-Ansicht></Router-Ansicht>
      </am Leben erhalten>
    </main>
  </div>
</Vorlage>

analysieren

Nachdem wir die Ansichtsebenenkomponente mit Keep-Alive umschlossen haben, stellen wir fest, dass der von uns geprüfte, eingegebene und gelöschte Inhalt beim Hin- und Herschalten der Route nicht verloren geht. Das heißt, Keep-Alive wird zum Speichern des vorherigen Komponentenstatus verwendet.

Gleichzeitig können wir sehen, dass in den Vue.js-Devtools auf der rechten Seite die entsprechende Komponente, die in der Router-Ansicht umgeschaltet wurde, bereits im inaktiven Zustand ist. Inaktiv bedeutet auf Englisch inaktiv und unbenutzt, das heißt, sie wurde zwischengespeichert und nicht zerstört. Daher werden die Vorgänge, die wir an der Komponente durchgeführt haben, und der Status der Komponente zwischengespeichert. Was wir überprüft, eingegeben und in der Dropdown-Liste ausgewählt haben, ist also immer noch vorhanden.

Vue.js devtools ist sehr nützlich und kann über Google heruntergeladen werden. Es ist ein gutes Tool für die Vue-Entwicklung.

Fragen aufwerfen

Wenn wir dies sehen, stellen wir fest, dass alle Komponenten der Ansicht unter der Router-Ansichtshierarchie zwischengespeichert werden, wenn wir Keep-Alive direkt hinzufügen. Manchmal möchten wir jedoch nur einen Teil davon zwischenspeichern und nicht alles. Was sollten wir tun? Es spielt keine Rolle, die Großen haben es bereits im Voraus in Betracht gezogen und für uns gelöst, nämlich die Einschluss- und Ausschlussattribute in Keep-Alive

Mit „include“ und „exclude“ wird angegeben, ob bestimmte Komponenten zwischengespeichert werden sollen

Include-Attribut

„einschließen“ bedeutet „einschließen“. Der Wert ist eine Zeichenfolge, ein regulärer Ausdruck oder ein Array. Nur Komponenten, deren Namen mit dem Wert von include übereinstimmen, werden zwischengespeichert. Sie können also angeben, welche Komponenten zwischengespeichert werden sollen. Sie können mehrere Komponenten zum Zwischenspeichern angeben. Hier verwenden wir als Beispiel eine Zeichenfolge, um mehrere Komponenten-Caches anzugeben. Die Syntax besteht darin, sie durch Kommas zu trennen. wie folgt:

//Geben Sie an, dass die Home-Komponente und die About-Komponente zwischengespeichert werden <keep-alive include="home,about" >
    <Router-Ansicht></Router-Ansicht>
</am Leben erhalten>

Ausschlussattribut

Exclude ist das Gegenteil von include, also „außer“, und gibt an, welche Komponenten nicht zwischengespeichert werden. Die Verwendung ist ähnlich wie bei include, und zwar wie folgt:

// Alles außer den Home- und About-Komponenten zwischenspeichern. In diesem Beispiel wird nur die Detailkomponente zwischengespeichert <keep-alive exclude="home,about" >
    <Router-Ansicht></Router-Ansicht>
</am Leben erhalten>

Nehmen Sie include="about,detail" als Beispiel

Die Syntax bedeutet, dass nur „About“ und „Details“ zwischengespeichert werden und andere Komponenten nicht zwischengespeichert werden. Wenn wir uns das Vue-Tool in der Abbildung unten ansehen, können wir auch sehen, dass die zwischengespeicherten Komponenten inaktiv werden, wenn sie sich nicht in der entsprechenden angezeigten Route befinden.

Neben den Include- und Exclude-Attributen verfügt Keep-Alive auch über ein Max-Attribut. Dieses Max-Attribut wird im Allgemeinen nicht allzu häufig verwendet. Sein Hauptzweck besteht darin, die Anzahl der zwischengespeicherten Komponenten zu steuern. Die später zwischengespeicherten Komponenten verdrängen die früher zwischengespeicherten Komponenten. Dies entspricht auch einer Cache-Optimierungsstrategie. Schließlich verbessert ordnungsgemäßes Caching das Benutzererlebnis, übermäßiges Caching verlangsamt jedoch den Computer.

Die Attributwerte von include und exclude sind die Namen der Komponenten.

Der Attributwert von „Include“ und „Exclude“ ist der Name der Komponente, d. h. der Namensattributwert der Komponente, d. h. der Namensattributwert, wie unten gezeigt.

<Skript>
    Standard exportieren {
      Name: "App"
      // ...
    };
</Skript>

Fragen aufwerfen

Wir wissen, dass es in Komponenten entsprechende logische JS-Teile gibt und Komponenten Anfragen senden müssen, um Daten zu erhalten. Im Allgemeinen senden wir Anfragen in Create- oder Mount-Hooks, um die großen Jungs im Backend nach Daten zu fragen. In Bezug auf das Problem der Hook-Funktion der Komponente nach der Verwendung von Keep-Alive müssen wir Folgendes beachten:

Ausführungsreihenfolge von Keep-Alive-Hook-Funktionen

Erstens werden nach der Verwendung der Keep-Alive-Komponente der aktivierte und der deaktivierte Hook automatisch zur Komponente hinzugefügt.

• aktiviert wird ausgelöst, wenn die Komponente aktiviert (verwendet) wird, was einfach als Auslösen beim Aufrufen dieser Seite verstanden werden kann
• Deaktiviert wird ausgelöst, wenn die Komponente nicht verwendet wird (inaktiver Zustand), was einfach als Auslösen beim Verlassen dieser Seite verstanden werden kann
  

Ausführungsreihenfolge für das Eingeben und Verlassen des Komponenten-Hooks

Angenommen, wir cachen nur die Home-Komponente, schauen wir uns den Code an und drucken dann die entsprechende Reihenfolge im Hook aus. Sie kennen die Reihenfolge, in der die Haken ausgeführt werden, und Sie werden beeindruckt sein, wenn Sie es selbst tun

Der Code lautet wie folgt

<Vorlage>
<div>
  <el-checkbox v-model="checked">Optionen</el-checkbox>
</div>
</Vorlage>
<Skript>
Standard exportieren {
Name: "Heim",
data() { return { geprüft: false } },
erstellt() {
  console.log("Ich bin der erstellte Hook");
},
montiert() {
  console.log("Ich bin der gemountete Hook");
},
aktiviert() {
  console.log("Ich bin der aktivierte Hook");
},
deaktiviert() {
  console.log("Ich bin ein deaktivierter Hook");
},
vorZerstören() {
  console.log("Ich bin ein beforeDestroy-Hook"); Wir können also schlussfolgern:
},
};
</Skript>

Geben Sie die Komponente ein und drucken Sie die Ergebnisse wie folgt

Ich bin der erstellte Haken. Ich bin der montierte Haken. Ich bin der aktivierte Haken.

Die Folgen des Verlassens des Komponentendrucks sind wie folgt

Ich bin der deaktivierte Haken

Fazit ziehen

Initialer Ein- und Ausgang erstellt ---> gemountet ---> aktiviert ---> deaktiviert
Nachfolgendes Ein- und Ausfahren aktiviert --> deaktiviert

Wir können also einige logische Verarbeitungen in den aktivierten und deaktivierten Hooks durchführen. Diese beiden Hooks ähneln ein wenig den Mounted- und BeforeDestroy-Hooks, sind aber dennoch unterschiedlich. Schließlich wird die Komponente durch die Verwendung von Keep-Alive nicht zerstört

Beispiele für Keep-Alive-Anwendungsszenarien

• Beim Anzeigen der Detailseite eines Datenelements in einer Tabelle wird immer noch der vorherige Status zurückgegeben, beispielsweise das vorherige Filterergebnis oder die vorherige Seitenzahl usw.
• Der Inhalt des ausgefüllten Formulars ist nach dem Zurückspringen der Route immer noch vorhanden, z. B. das Eingabefeld, das Dropdown-Feld, der Schalterschalter usw. Der Benutzer hat viele Dinge eingegeben und kann diese nach dem Zurückspringen nicht löschen. Sie können den Benutzer nicht erneut schreiben lassen, oder?
• Wie auch immer, es behält einfach den vorherigen Zustand bei. Es gibt tatsächlich viele spezifische Anwendungsszenarien, auf die ich hier nicht näher eingehen werde ...
  

Auffüllen

Oben verwenden wir zur Erklärung den kleinen Fall von Keep-Alive, das die Router-Ansicht umschließt. Tatsächlich umschließt Keep-Alive normalerweise entweder die Router-Ansicht oder eine dynamische Komponentenkomponente. Der Code ist eigentlich derselbe. Das Umschließen dynamischer Komponenten wird wie folgt verwendet:

<keep-alive include="home" exclude="über">
     <Komponente: ist = "welcheKomponente"></Komponente>
</am Leben erhalten>

Die Include- und Exclude-Attribute von Keep-Alive unterstützen auch die Syntax von V-Bind und sind daher ebenfalls sehr flexibel.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Keep-Alive-Komponenten in Vue. Weitere relevante Inhalte zu Keep-Alive-Komponenten in Vue finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!