Detaillierte grafische Erklärung zum Löschen des Keep-Alive-Cache

Eröffnungsszene

Mein Projekt hat keine Trennung zwischen Front- und Backend. Der Technologie-Stack ist layui+vue+jq. Ich habe vue später eingeführt. Um eine bessere Komponentenbildung zu erreichen, wird die Seite in Komponenten unterteilt, um Code-Duplikationen zu reduzieren. Da jq-Seiten häufig DOM-Elemente abrufen müssen, sind die Seiten sehr redundant. jq-Seiten lassen sich auch nicht einfach in Komponenten zerlegen und die Funktionen der Seiten extrahieren und kapseln. Deshalb habe ich vue eingeführt. Vor kurzem musste ich eine Anforderung realisieren, nämlich das Zwischenspeichern mehrerer Seiten. Durch Klicken auf die Menüleiste links wird die Seite rechts angezeigt, aber die angeklickten Seiten müssen zwischengespeichert werden, wie unten gezeigt

Dies ist ein einfaches Beispiel, das ich gemacht habe

Direktes Rendern mit v-for

Zuerst bestand meine Idee darin, ein Array zu entwerfen, die angeklickte Komponente bei jedem Klick in ein Array zu verschieben und es dann mit einer benutzerdefinierten Komponente über v-for zu durchlaufen.

Es wird festgestellt, dass beim Klicken der gesamte Inhalt hinzugefügt wird. Zu diesem Zeitpunkt wird ein Index benötigt, um die aktuelle Hervorhebung anzuzeigen, und die Anforderung besteht darin, jeweils nur eine Seite anzuzeigen. Zu diesem Zeitpunkt muss der Index verwendet werden, um andere Seiten auszublenden.

Es gibt ein Problem mit v-for. Beim Löschen wird es neu gerendert, da sich das Array ändert

Jetzt können Sie sehen, dass diese Funktion implementiert wurde, aber jeder Klick fügt viele identische Elemente hinzu. Zu diesem Zeitpunkt können wir einen Deduplizierungsvorgang durchführen.

Die Mehrseitenfunktion wird einfach durch Deduplizierung realisiert

Da meine Funktion das Caching mehrerer Seiten implementieren muss, d. h. alle diese Seiten zwischenspeichern muss, habe ich die Keep-Alive-Komponente verwendet. Wenn sich das Array jedoch ändert, wird die Seite erneut gerendert.

Wenn ich Seite B bediene, schließe ich Seite A, das heißt, lösche sie, und dann wird Seite B neu gerendert, wodurch der gewünschte Cache-Effekt nicht erreicht wird. Daher können Sie v-for nicht direkt zum Rendern verwenden

Später habe ich darüber nachgedacht, selbst eine benutzerdefinierte Direktive zu implementieren, um zu bestimmen, ob ein erneutes Rendern erfolgen soll, aber die benutzerdefinierte Direktive verfügt überhaupt nicht über diese Möglichkeit, sodass ich weder die Instanz noch den Vnode abrufen und das Caching nicht selbst implementieren kann.

Später wollte ich selbst eine Komponente schreiben, um zum Rendern die JSX-Syntax zu verwenden und zu entscheiden, ob die Instanz zwischengespeichert oder neu erstellt werden soll, aber ich konnte sie mit dem Cache nicht rendern.
Dann fiel mir die Keep-Alive-Komponente ein, die die aktuell markierte Seite direkt und ohne Schleife rendert.

Direktes Rendern mit benutzerdefinierten Komponenten

Zu diesem Zeitpunkt kann die Cache-Funktion realisiert werden. Es ist immer noch sehr mühsam, selbst ein Keep-Alive zu realisieren. Das integrierte Keep-Alive ist immer noch sehr nützlich und der Cache ist immer noch sehr stark.

Probleme mit dem Keep-Alve-Powered-Cache

Später habe ich ein Problem festgestellt. Als ich die Seite bearbeitet und geschlossen habe, waren beim erneuten Öffnen immer noch Daten auf der Seite. Ich kann nur sagen, dass der Keep-Alive-Cache zu leistungsfähig ist. Dann habe ich darüber nachgedacht, wie ich den Cache leeren kann. Die offizielle Website hat zwei APIs, Include und Exclude. Include speichert die Namen der enthaltenen Komponenten im Cache, und Exclude ist genau das Gegenteil. Die enthaltenen Komponenten werden nicht im Cache gespeichert. Meine Seitenkomponente wurde jedoch zuvor erstellt und ist eine anonyme Komponente.

Ich habe versucht, den Namen hinzuzufügen, aber es hat nicht funktioniert. Ich habe nachgeschaut, wie man den Cache auf Baidu löscht.

Referenzartikel: https://www.jb51.net/article/219189.htm

Ich habe darüber nachgedacht, ob ich den Cache leeren könnte, wenn ich es lösche.

Nach langem Suchen habe ich den Cache endlich gefunden

Dies ist ein einfaches Beispiel, das ich in $children[0].$options.parent.cache geschrieben habe. In meinem realen Projekt ist es das erste Element in _vnode.chindren.componentInstance

Das Wichtigste ist dieses Keep-Alive. Wenn Sie dieses Ding finden, können Sie den Cache finden. Ich habe schon einmal versucht, jsx zu schreiben, aber anscheinend kann ich das Cache-Ding nicht finden. Ich schätze, es gibt keinen Cache ohne Keep-Alive. Es ist immer noch schwierig, ein Keep-Alive selbst zu implementieren.

Suchen Sie den Cache und Sie können sehen, dass der darin enthaltene Schlüsselname mit dem Namen unserer Komponente zusammenhängt. Sie können indexOf zum Abgleichen verwenden und den Cache anschließend löschen.

Sie können sehen, dass die Funktion implementiert wurde, sodass ein mehrseitiges Caching erreicht werden kann.

Ich muss sagen, dass Vue immer noch sehr leistungsstark ist. Keep-Alive ist immer noch sehr leistungsstark.

Zusammenfassen

Dies ist das Ende dieses Artikels zum Löschen des Keep-Alive-Cache. Weitere Informationen zum Löschen des Keep-Alive-Cache finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!