Die Rolle der erstellten Methode in vue.js_vue.js

In diesem Artikel werden hauptsächlich die Rolle der Erstellungsmethode in vue.js und der Unterschied zwischen „gemountet“ und „erstellt“ vorgestellt. Freunde, die sie benötigen, können darauf verweisen

Dies ist eine ihrer Lebenszyklus-Hook-Funktionen ist eine Vue-Instanz. Diese Funktion wird nach der Generierung aufgerufen. Nachdem eine Vue-Instanz generiert wurde, muss sie an ein HTML-Element gebunden, dann kompiliert und dann in das Dokument eingefügt werden. Jede Stufe verfügt über eine Hook-Funktion, um Entwicklern den Umgang mit unterschiedlicher Logik in verschiedenen Stufen zu erleichtern.

Im Allgemeinen können Sie in der erstellten Funktion Ajax aufrufen, um die für die Seiteninitialisierung erforderlichen Daten abzurufen.

Instanzlebenszyklus

Jede Vue-Instanz durchläuft eine Reihe von Initialisierungsprozessen, bevor sie erstellt wird. Beispielsweise muss die Instanz den Datenbeobachter konfigurieren, die Vorlage kompilieren, die Instanz im DOM bereitstellen und dann das DOM aktualisieren, wenn sich die Daten ändern. Während dieses Prozesses ruft die Instanz auch einige Lebenszyklus-Hooks auf, was uns die Möglichkeit gibt, benutzerdefinierte Logik auszuführen. Beispielsweise wird der Create-Hook aufgerufen, nachdem die Instanz erstellt wurde:

var vm = new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// -> "a is: 1"

Es gibt auch einige andere Hooks, die in verschiedenen Phasen des Instanzlebenszyklus aufgerufen werden , wie gemountet, aktualisiert, zerstört. Der Hook verweist auf die Vue-Instanz, die ihn aufgerufen hat. Einige Benutzer fragen sich möglicherweise, ob Vue.js ein Konzept für „Controller“ hat. Die Antwort lautet: Nein. Die benutzerdefinierte Logik einer Komponente kann auf diese Hooks verteilt werden.

Lebenszyklusdiagramm

Das folgende Diagramm veranschaulicht den Lebenszyklus einer Instanz. Sie müssen nicht alles sofort herausfinden, aber es wird später helfen.

Ergänzung:

VDer Unterschied zwischen montiert und erstellt im ue-Lebenszyklus

1 Was ist der 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 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 erstellt und montiert?

Das offizielle Diagramm sieht wie folgt aus:

Wir betrachten zwei Knoten aus dem Bild:

erstellt: gerendert in html in der Vorlage Wird vorher aufgerufen, das heißt, einige Eigenschaftswerte werden normalerweise vor dem Rendern in die Ansicht initialisiert.

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

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, z. B. bei der Verwendung des Plug-In-Diagramms. js: var ctx = document.getElementById(ID) Normalerweise gibt es diesen Schritt, und wenn Sie ihn in die Komponente schreiben, werden Sie feststellen, dass Sie keine Erstkonfiguration für das erstellte Diagramm durchführen können. Sie müssen dann warten, bis der HTML-Code gerendert ist montiert ist die beste Wahl. Schauen wir uns ein Beispiel an (unter Verwendung von Komponenten).

3. Beispiel

<span style="font-size: 14px;">Vue.component("demo1",{ 
  data:function(){ 
   return { 
    name:"", 
    age:"", 
    city:"" 
   } 
  }, 
  template:"<ul><li id=&#39;name&#39;>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>", 
  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")/</span>/第二个命令台输出的结果<span style="font-size: 14px;"> 
   console.log(x.innerHTML); 
  } 
 }); 
 var vm = new Vue({ 
  el:"#example1" 
 })</span>

Sie können die Ausgabe wie folgt sehen:

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

Aber schauen Sie sich gleichzeitig die Konsole wie folgt an:

Sie können sehen, dass die erste einen Fehler gemeldet hat, was eigentlich daran liegt, dass die id kann nicht gefunden werden, getElementById(ID) Das Element wurde aus folgenden Gründen nicht gefunden:

Beim Erstellen wurde das HTML in der Ansicht nicht gerendert, wenn Sie also direkt den Dom-Knoten des HTML an dieser Stelle bedienen Zu diesem Zeitpunkt können Sie die relevanten Elemente nicht finden

Da der HTML-Code zu diesem Zeitpunkt gerendert wurde, kann der Dom-Knoten im gemounteten Zustand direkt bedient werden, sodass 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.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Beispielcode für Vue zur Implementierung des internen Komponentenkarussell-Umschalteffekts

Detaillierte Erläuterung der Operatorüberlastung in Javascript

JavaScript implementiert einen einfachen dynamischen Fortschrittsbalkeneffekt

Das obige ist der detaillierte Inhalt vonDie Rolle der erstellten Methode in vue.js_vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!