Lösungsmethode für das Problem 'undefined' bei Verwendung von refs in Vue

Bei der Projektarbeit in der Firma habe ich immer das Gefühl gehabt, dass die Verwendung von ref zur Positionierung von DOM-Knoten sehr bequem ist. Aber währenddessen bin ich auf ein Problem gestoßen, nämlich dass im Hook mounted(){} this.$refs.xxx verwendet wird, und das Ausgabeergebnis ist undefined?

Daher habe ich den .vue-Datei, die mit ref positioniert wurde, verglichen und die Unterschiede zwischen ihnen entdeckt.

Um zu verstehen, warum ein bestimmter DOM-Knoten nicht gefunden werden kann, müssen wir zunächst verstehen, was der Hook-Funktion mounted(){} dient.

Hier ist der von Vue offiziell bereitgestellte Vue-Lebenszyklus (Teil), wie es die offiziellen Informationen sagen, es ist nicht notwendig, ihn zu verstehen, aber mit deinem Lernen und Verwenden wird sein Referenzwert immer höher.

　

Ursprünglich, im mounted-Status, ist die DOM-Struktur bereit, aber hier muss die Bereitschaft besonders erwähnt werden:

Die DOM-Struktur ist bereits vorhanden, aber wenn ein bestimmter DOM-Knoten in der DOM-Struktur v verwendet wird-if, v-show oder v-for (d.h. DOM, der dynamisch basierend auf den von der Backend-Sitzung erhaltenen Daten manipuliert wird, d.h. reaktiv), dann sind diese DOMs in der mounted-Phase nicht mehr auffindbar.

Der aktuelle mounted-Status ist in der Regel dazu bestimmt, Backend-Anfragen zu starten, Daten abzurufen und mit Routen-Hooks bestimmte Dinge zu erledigen, kurz gesagt, es geht darum, Daten im mounted-Hook zu laden, die geladenen Daten werden in dieser Phase nicht mehr im DOM aktualisiert

Wenn also im mounted-Hook $refs verwendet werden, und der Ref auf einem v-if, v-for, v-show-DOM-Knoten können nur undefined zurückgegeben werden, weil sie im Zustand mounted gar nicht existieren !!

Nach Überprüfung ist der obige Text falsch. Der Hauptgrund, warum $refs nicht lokalisiert werden kann, liegt darin, dass v-if, v-for, v-Die Anweisungen show hängen von den Parametern des übergeordneten Komponenten ab, diese Parameter sind im Zustand mounted() noch nicht erhältlich ~ ~ ~ ~ ~ !!

Wenn Sie wirklich sicherstellen möchten, dass Sie die Daten erhalten, wenn der DOM vollständig geladen ist, müssen Sie die globale API von VUE aufrufen: this.$nextTick(() => {})

Wenn der Zustand mounted die Ladephase ist, dann ist der Zustand updated die Phase, in der die Daten in den DOM übertragen wurden (die geladenen Daten verarbeitet wurden). Zu diesem Zeitpunkt sind alle ref, Daten usw. auf die DOM-Struktur gemountet. Im update-Stadium können Sie this.$refs.xxx verwenden, um100% können den DOM-Knoten finden.

Der Unterschied zwischen updated und mounted ist, dass Vue bei jeder Aktualisierung der DOM-Struktur den Hook-Funktion updated(){} aufruft! Mounted wird nur einmal ausgeführt.

Kurz gesagt, wenn Sie beim Debuggen den Zustand der Elemente sehen können, können Sie im updated-Stadium den entsprechenden DOM-Knoten mit this.$refs.xxx finden!

Zur Verwendung von $refs hat die offizielle Dokumentation spezielle Hinweise gegeben:

　

Bitte achten Sie darauf, wenn Sie es verwenden- -

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen bei Ihrem Lernen hilft und wir hoffen, dass Sie die Anleitung von Anschreien stark unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des Urhebers. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht von Hand bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie verdächtige urheberrechtliche Inhalte finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails zur Meldung von Verstößen und stellen Sie relevante Beweise zur Verfügung. Sobald nachgewiesen wird, dass der Inhalt urheberrechtlich geschützt ist, wird diese Website den fraglichen Inhalten sofort entziehen.)