Analyse und Lösung von Datenverlusten während der Wertübertragung von Vue-Komponenten

Vorwort

Im vorherigen Artikel wurden zwei Datentypen in JavaScript, Basistypen und Referenztypen, sowie flache und tiefe Kopien von Referenztypen vorgestellt. Hierbei ist zu beachten, dass die Methode zum tiefen Kopieren von Referenztypwerten in diesem Artikel nicht perfekt ist und einige Attributwerte im Referenztypwert nicht vollständig in die neue Variable kopiert werden können. Beispielsweise gehen beim Deep-Copy-Vorgang Funktionswerte verloren.

Frage

Wenn in tatsächlichen Projekten eine sekundäre gekapselte Komponente verwendet wird und einige Deep-Copy-Vorgänge von Attributwerten innerhalb der gekapselten Komponente ausgeführt werden, besteht eine hohe Wahrscheinlichkeit, dass einige Daten verloren gehen, da es sich bei dem übergebenen Attributwert um einen Referenztypwert handelt.

Beispiel

Nehmen Sie als Beispiel die ak-table-Komponente, die auf der el-table-Kapselung basiert:

Übergeben Sie das Zeilenschlüsselattribut an die ak-table-Komponente. Dieses Attribut kann eine Funktion übergeben: Function(row). Einzelheiten finden Sie in der offiziellen Dokumentation.

Nach normaler Logik sollte der an ak-table übergebene Attributwert unverändert an die Komponente el-table übergeben werden, aber hier ist etwas Merkwürdiges passiert. Die von uns übergebene Funktion ist in der Komponente verschwunden!

Problemanalyse

Übergeben Sie zunächst den Wert des Zeilenschlüsselattributs von ak-table, bei dem es sich um eine Funktion handelt, also einen Referenztypwert. Wenn dann gemäß dem, was am Anfang des Artikels gesagt wurde, ein allgemeiner Deep-Copy-Vorgang für einen Referenztypwert ausgeführt wird, gehen Daten wie Funktionen und Arrays verloren.

Suchen Sie in ak-table nach dem Attribut row-key. Da es nicht in props definiert ist, sollte es im attrs-Attribut der Komponente gespeichert werden. Gehen Sie zur gemounteten Methode und drucken Sie das attrs-Attribut. Gehen Sie zur gemounteten Methode und drucken Sie den Wert der Attrs aus, um den Datenvergleich vor und nach dem Kopieren anzuzeigen.

Konsolenausgabe

———————————————————————————————————————

Das Problem ist hier sehr klar. Zunächst möchte die ak-table-Komponente den übergebenen Attributwert tatsächlich initialisieren und führt dann einen Deep-Copy-Vorgang für $attrs aus. Nach dem Kopieren geht der Zeilenschlüsselattributwert verloren, was zu Datenverlust führt.

Lösung

Für den Wert des übergebenen Referenztyps empfängt die untergeordnete Komponente den Wert direkt von der übergeordneten Komponente über das Props-Attribut, verarbeitet den übergebenen Wert dann nicht und verwendet ihn direkt.

Für die übergebenen Werte vom Referenztyp ist beim Kopieren eine Sonderbehandlung erforderlich und die benötigten Attributwerte sind rekursiv in die neue Variable zu kopieren.

Zusammenfassen

Das Verständnis der grundlegenden Typen und Referenztypen in JavaScript sowie das Kopieren von Referenztypwerten sind für uns grundlegende Fähigkeiten, um mit dieser Sprache voranzukommen. Manchmal glauben Leute aus Unachtsamkeit, dass sie durch das einfache und grobe Kopieren einer Variablen eine vollständige Kopie davon erhalten, was dazu führt, dass einige Daten „verschwinden“. Zu diesem Zeitpunkt können Sie sich die Lösung im Artikel ansehen. Dies ist ein Problem, auf das ich bei der Projektentwicklung gestoßen bin. Ich zeichne es hier auf und hoffe, dass es Ihnen hilfreich sein wird.

Damit ist dieser Artikel zur Analyse und Lösung von Datenverlusten während der Übertragung von Vue-Komponentenwerten abgeschlossen. Weitere relevante Inhalte zum Thema Verlust von Vue-Komponentenwerten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Referenzlink: Einige Fallstricke von JavaScript Deep Copy