[Vue] Kombiniert mit dem Quellcode, um den Lebenszyklus von Vue zu verstehen

Vorwort

Was ist ein Lebenszyklus?

Jede Vue-Instanz durchläuft bei ihrer Erstellung eine Reihe von Initialisierungsprozessen – zum Beispiel muss sie die Datenüberwachung einrichten, Vorlagen kompilieren, die Instanz in das DOM einhängen und das DOM aktualisieren, wenn sich die Daten ändern usw. Es hat eine Reihe von Prozessen durchlaufen, von der Erstellung, Initialisierung von Daten, Kompilierung von Vorlagen, Mounten von Dom, Rendern → Aktualisieren → Rendern, Entladen usw. Gleichzeitig werden während dieses Prozesses einige Funktionen ausgeführt, die als Lebenszyklus-Hooks bezeichnet werden

 Als nächstes verwenden wir das Lebenszyklus-Flussdiagramm und den Vue-Quellcode, um zu analysieren, was in diesem Prozess passiert ist, und leihen uns das Lebenszyklus-Flussdiagramm von der offiziellen Website aus

1.neue Vue()

var vm = new Vue({}), bedeutet, ein leeres Vue-Instanzobjekt zu initialisieren, es gibt keine anderen Methoden und keinen Lebenszyklus darin

2. Init-Ereignisse und Lebenszyklus

Gibt an, dass gerade ein leeres Vue-Instanzobjekt initialisiert wurde und dann einige standardmäßige Lebenszyklusfunktionen und -ereignisse initialisiert wurden. Aus dem Quellcode können wir sehen, dass das Ereignis vor beforeCreated initialisiert wird

 3.vor dem Erstellen

Hinweis: Im beforeCreate-Zyklus werden weder Daten noch Methoden initialisiert! Zu diesem Zeitpunkt kann es nicht aufgerufen und betrieben werden

export default {
  name: '',
  data() {
   return {
    message: 'init'
   }
  },

  methods: {
    handleLog() {
      console.log('执行了handleLog方法')
    }
  },
 
  beforeCreate() {
    // 注意：在beforeCreate周期中，data和methods都没有被初始化！！
    console.log('beforeCreate')
    console.log(`this.message: ${this.message}`)
    this.handleLog()
  },
}

Ausführung können wir in der Konsole sehen, Methoden aufrufen und Daten ausgeben

 4. Init-Injektionen und Reaktivität

Aus dem Quellcode ist ersichtlich, dass wir in diesem Prozess Daten und Methoden usw. initialisiert haben.

 5.erstellt

Dies ist die zweite Lebenszyklusfunktion. In created wurden Daten und Methoden initialisiert. Wenn Sie die Methode in Methoden aufrufen oder die Daten in data operieren möchten, können Sie frühestens in created operieren.

export default {
  name: '',
  data() {
   return {
    message: 'init'
   }
  },

  methods: {
    handleLog() {
      console.log('执行了handleLog方法')
    }
  },
 
   created() {
    // 在created中，data和methods都已经被初始化好了！
    // 如果要调用methods中的方法，或者操作data中的数据最早只能在created里面操作！
    console.log('created')
    console.log(this.message) // 输出： init
    this.handleLog() //  输出：执行了handleLog方法
  },
}

6. Ermitteln Sie el- und Template-Attribute

Hier wird beurteilt, ob es ein el-Attribut gibt, wenn ja, dann beurteilen, ob es ein Template-Attribut gibt, wenn es ein Template-Template gibt, wird es in eine Render-Funktion umgewandelt, wenn es kein Template-Attribut gibt, kompilieren wir das Element entsprechend el als Vorlage;

Wenn es kein el-Attribut gibt, führen wir die vm.$mount(el)-Methode aus

Hinweis: Dies bedeutet, dass Vue die Vorlage weiterhin bearbeitet, die Anweisungen im Vue-Code ausführt, eine kompilierte endgültige Vorlagenzeichenfolge im Speicher generiert und die Vorlagenzeichenfolge dann als DOM im Speicher rendert. An diesem Punkt wird die Vorlage nur im Arbeitsspeicher gerendert, und die Vorlage wird nicht auf der Seite bereitgestellt

7.vorMount

Die dritte Lebenszyklusfunktion gibt an, dass die Vorlage im Speicher kompiliert, aber nicht auf der Seite gerendert wird und die Seite zu diesem Zeitpunkt noch alt ist

Wie ist der Satz „Die Seite ist noch alt?“ zu verstehen, siehe Beispiel unten

<div id="app">
    <div id="h3">{
   
   {message}}</div>
</div>


 beforeMount() {
    console.log('beforeMount')
    // 此时获取的html节点为null，原因是模板未渲染
    let a = document.querySelector('#h3').innerText
    console.log(a)
 },

Wenn der BeforeMount-Lebenszyklus ausgeführt wird, wurden die Elemente der Seite nicht tatsächlich ersetzt, sondern nur einige zuvor geschriebene Vorlagenzeichenfolgen

8.montiert

Dies ist der vierte Lebenszyklus.In diesem Schritt wird die im Speicher kompilierte Vorlage tatsächlich in derBrowserseite ersetzt, und der Benutzer kann auch die gerenderte Seite sehen.el wird durch die neu erstellte vm.$el ersetzt und erfolgreich gemountet

<div id="app">
    <div id="h3">{
   
   {message}}</div>
</div>


 mounted() {
    console.log('mounted')
    let a = document.querySelector('#h3').innerText
    console.log(a) // 正确输出：init
 },

Hinweis: Mounted ist die letzte Lebenszyklusfunktion während der Instanzerstellung