Was ist der Unterschied zwischen gemountet und erstellt in Vue?-Front-End-Fragen und Antworten-php.cn

Was ist der Unterschied zwischen gemountet und erstellt in Vue?

青灯夜游

Freigeben： 2022-12-28 18:59:26

Original

10143 Leute haben es durchsucht

Unterschied: 1. „created“ wird aufgerufen, bevor die Vorlage in HTML gerendert wird, das heißt, bestimmte Attributwerte werden normalerweise initialisiert und dann in eine Ansicht gerendert Die Seite ist abgeschlossen, und dann ist der Dom des HTML-Knotens, der einige erforderliche Vorgänge ausführt. 2. Einige anfängliche Konfigurationen des Diagramms können beim Erstellen nicht durchgeführt werden. Sie müssen warten, bis der HTML-Code gerendert ist, bevor Sie fortfahren.

Was ist der Unterschied zwischen gemountet und erstellt in Vue?

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

1. Was ist ein Lebenszyklus?

Umgangssprachlich handelt es sich um Eine Reihe von Prozessen, die eine Instanz oder Komponente in Vue von der Erstellung bis zur Zerstörung durchläuft. Obwohl es nicht sehr streng ist, ist es grundsätzlich verständlich.

Durch eine Reihe von Übungen habe ich nun alle aufgetretenen Probleme gelöst und werde heute den Unterschied zwischen erstellt und montiert aufzeichnen:

2. Was ist der Unterschied zwischen erstellt und montiert?

Das offizielle Diagramm sieht wie folgt aus:

Was ist der Unterschied zwischen gemountet und erstellt in Vue?

Wir betrachten zwei Knoten aus dem Diagramm:

erstellt: Wird aufgerufen, bevor die Vorlage in HTML gerendert wird, d. h. Normalerweise werden bestimmte Attributwerte initialisiert und dann in eine Ansicht gerendert.

montiert: Wird aufgerufen, nachdem die Vorlage in HTML gerendert wurde, normalerweise nach Abschluss der Initialisierungsseite, und führt dann einige erforderliche Vorgänge am DOM-Knoten des HTML aus.

Tatsächlich sind die beiden einfacher zu verstehen. Created wird normalerweise häufiger verwendet, während Mounted normalerweise bei der Verwendung einiger Plug-Ins oder Komponenten verwendet wird, beispielsweise bei der Verwendung des Plug-Ins chart.js: var ctx = document.getElementById (ID); Normalerweise gibt es diesen Schritt, aber wenn Sie ihn in eine Komponente schreiben, werden Sie feststellen, dass Sie keine Erstkonfiguration für das erstellte Diagramm durchführen können gerendert werden, bevor Sie fortfahren. Dann ist „mounten“ die einzige Option. Schauen wir uns ein Beispiel an (unter Verwendung von Komponenten).

3. Beispiel

Vue.component("demo1",{
        data:function(){
            return {
                name:"",
                age:"",
                city:""
            }
        },
        template:"

Nach dem Login kopieren

{{name}}
{{age}}
{{city}}

", created:function(){ this.name="唐浩益" this.age = "12" this.city ="杭州" var x = document.getElementById("name")//第一个命令台错误 console.log(x.innerHTML); }, mounted:function(){ var x = document.getElementById("name")//第二个命令台输出的结果 console.log(x.innerHTML); } }); var vm = new Vue({ el:"#example1" }) Sie können die Ausgabe wie folgt sehen:

Sie können sehen, dass alle erfolgreich gerendert wurden, wenn der Erstellung ein Anfangswert zugewiesen wurde.

Aber gleichzeitig sehen Sie sich die Konsole wie folgt an:

Sie können sehen, dass der erste einen Fehler gemeldet hat, und getElementById(ID) hat das Element nicht gefunden:

Beim Erstellen wird der HTML-Code in der Ansicht nicht gerendert. Wenn Sie also zu diesem Zeitpunkt den Dom-Knoten des HTML-Codes direkt bedienen, werden Sie dies auf jeden Fall tun Die relevanten Elemente werden nicht gefunden

Und in gemountet, aus diesem Grund Der HTML-Code wurde gerendert, sodass der Dom-Knoten direkt bedient werden kann und das Ergebnis „Tang Haoyi“ ausgegeben wird.

Das Obige ist meine eigene Zusammenfassung des Unterschieds zwischen montiert und montiert. Ich werde es relativ einfach aufzeichnen, um meinen Eindruck zu vertiefen.

【Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen gemountet und erstellt in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!