Es erscheint eine ausführliche Erklärung zur Verwendung von Refs zum Auffinden von Dom in Vue und undefiniert

Ich fand es immer sehr praktisch, ref zum Auffinden von Dom-Knoten zu verwenden. Aber ich bin in diesem Zeitraum auf ein Problem gestoßen, das heißt, wenn ich this.$refs.xxx im Mounted(){}-Hook verwende, ist das, was gedruckt wird, undefiniert?

Also habe ich die .vue-Dateien verglichen, die zuvor mit ref positioniert wurden, und den Unterschied zwischen ihnen festgestellt. In diesem Artikel wird hauptsächlich die Lösung des Problems der Verwendung von Refs zum Auffinden von Undefiniertem im DOM in Vue vorgestellt. Der Herausgeber hält es für recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz angeben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wenn wir wissen wollen, warum ein bestimmter DOM-Knoten nicht gefunden werden kann, müssen wir zunächst verstehen, wofür die Hook-Funktion mount(){} verwendet wird.

Das Folgende ist der Vue-Lebenszyklus (Teil), der vom Vue-Beamten angegeben wurde. Wie der Beamte sagte, müssen Sie ihn nicht am Anfang verstehen, aber wenn Sie ihn lernen und verwenden, wird sein Referenzwert klar werden immer höher.

Es stellt sich heraus, dass die DOM-Struktur im montierten Stadium fertig ist, aber die Bereitschaft hier bedarf einer besonderen Erklärung:

Die DOM-Struktur ist herausgekommen , aber wenn ein bestimmter DOM-Knoten in der DOM-Struktur v-if, v-show oder v-for verwendet (d. h. das DOM basierend auf den erhaltenen Hintergrunddaten dynamisch betreibt, also reagiert), dann werden diese DOMs dies nicht tun finden Sie in der berittenen Bühne.

Die gemountete Phase wird zu diesem Zeitpunkt im Allgemeinen verwendet, um Back-End-Anfragen zu initiieren, Daten zurückzurufen und einige Dinge mit Routing-Hooks zu tun. Vereinfacht gesagt werden nur Daten in den gemounteten Hook geladen Die geladenen Daten befinden sich nicht

im DOM, das zu diesem Zeitpunkt aktualisiert wird. Wenn also $refs im gemounteten Hook verwendet wird und sich die Referenz in einem DOM-Knoten mit v-if, v-for befindet, v-show, es wird zurückgegeben. Sie können nur undefiniert sein, da sie in der gemounteten Phase überhaupt nicht existieren! !

Nach der Überprüfung ist der obige Text falsch. Der Hauptgrund, warum $refs nicht gefunden werden kann, liegt darin, dass Anweisungen wie v-if, v-for und v-show auf von der übergeordneten Komponente übergebenen Parametern basieren , Dieser Parameter wurde während der mount()-Phase nicht abgerufen~~~~! ! ! !

Wenn Sie die Daten nach dem Laden des DOM wirklich erhalten möchten, müssen Sie die globale API von VUE aufrufen: this.$nextTick(() => {})

Wenn Sie sagen mount Die Stufe ist die Ladestufe, dann ist die aktualisierte Stufe die Stufe, in der die Daten im DOM aktualisiert werden (die geladenen Daten werden zu diesem Zeitpunkt alle in der DOM-Struktur gemountet). Dies geschieht in der Update-Phase. .$refs.xxx, der DOM-Knoten kann zu 100 % gefunden werden.

Der Unterschied zwischen „update“ und „mounted“ besteht darin, dass Vue jedes Mal, wenn die DOM-Struktur aktualisiert wird, die Hook-Funktion „update(){}“ aufruft! Und mount wird nur einmal ausgeführt

Einfach ausgedrückt: Solange Sie beim Debuggen die Existenz des Elements sehen können, können Sie this.$refs.xxx verwenden, um den entsprechenden DOM-Knoten in der aktualisierten Phase zu finden !

Bezüglich der Verwendung von $refs gibt die offizielle Dokumentation speziell die folgenden Tipps:

Seien Sie vorsichtig bei der Verwendung.

Verwandte Empfehlungen:

Detaillierte Erklärung des Unterschieds zwischen undefiniert und null in JavaScript

Lösung für den undefinierten Index der PHP-Eingabeaufforderung

Lösung für das Problem des Aufrufs der undefinierten Funktion curl_init() beim Ausführen von PHP

Das obige ist der detaillierte Inhalt vonEs erscheint eine ausführliche Erklärung zur Verwendung von Refs zum Auffinden von Dom in Vue und undefiniert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!