So verwenden Sie vue.js+created

Dieses Mal zeige ich Ihnen, wie Sie vue.js+created verwenden und welche Vorsichtsmaßnahmen für die Verwendung von vue.js+created gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Dies ist eine seiner Lebenszyklus-Hook-Funktionen, die aufgerufen wird, nachdem eine Vue-Instanz generiert wurde. 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 erstellte 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, z. B. 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 das alles sehen wird in erstellt zugewiesen. Es wurde erfolgreich mit dem Anfangswert gerendert.

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.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

vuejs Projektpaketierungsoptimierung

Keep-Alive steuert die Anzahl der Serveranfragen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue.js+created. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!