Detaillierte Erklärung und klassische Interviewfragen zum Vue-Lebenszyklus und zu Hook-Funktionen

1. Vue-Lebenszyklus

Der gesamte Prozess von der Erstellung bis zur Zerstörung einer Komponente ist der Lebenszyklus

Der Prozess von der Erstellung bis zur Zerstörung einer Vue-Instanz ist der Lebenszyklus. Das heißt, eine Reihe von Prozessen aus der Erstellung, Initialisierung der Daten, Kompilierung der Vorlagen, Mounten von Dom → Rendern, Aktualisieren → Rendern, Deinstallation usw., wir nennen dies den Lebenszyklus von Vue.

2. Hook-Funktion

Das Vue- Framework verfügt über integrierte Funktionen, die im Verlauf der Lebenszyklusphase der Komponente automatisch zu bestimmten Zeiten ausgeführt werden und bestimmte Vorgänge durchführen.

2.1 Unterteilt in 4 Phasen und 8 Methoden:

Das folgende Diagramm zeigt den Lebenszyklus einer Instanz:

2.2 Initialisierungsphase

1.new Vue() – Vue-Instanziierung (die Komponente ist auch eine kleine Vue-Instanz)

2.Init Events & Lifecycle – Initialisierungsereignisse und Lebenszyklusfunktionen

3.beforeCreate – Lifecycle-Hook-Funktion wird ausgeführt

4.Init-Injektionen und Reaktivität – Daten und Methoden in Vue hinzufügen

5.created – Lifecycle-Hook-Funktion wird ausgeführt, Instanz wird erstellt

6. Als nächstes folgt die Phase der Vorlagenerstellung – Beginn der Analyse

7.Hat el-Option? – Gibt es eine el-Option? – Überprüfen Sie, wo Sie es aufhängen können

Nein. Rufen Sie die Methode $mount() auf

Ja, weiterhin die Vorlagenoption prüfen

<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            Nachricht: „Hallo, Vue“
        }
    },
    // 1. Initialisierung // Nach new Vue() fügt vue dem Instanzobjekt einige Eigenschaften und Methoden hinzu, Daten und Methoden werden „vorher“ initialisiert
    vorErstellen(){
        console.log("beforeCreate -- ausführen");
        console.log(this.msg); // undefiniert
    },
    // Nachdem Daten und Methoden initialisiert wurden // Szenario: Netzwerkanfrage, globales Ereignis registrieren erstellt(){
        console.log("erstellt – ausgeführt");
        console.log(diese.msg); // hallo, Vue
 
        dieser.timer = setzeInterval(() => {
            console.log("Hahaha");
        }, 1000)
    }
}
</Skript>

2.3 Montagephase

1. Überprüfung der Vorlagenoptionen

Ja – Vorlage kompilieren und Renderfunktion zurückgeben

Keine – Kompilieren Sie den der el-Option entsprechenden Tag als Vorlage (zu rendernde Vorlage).

2. Bevor der virtuelle DOM als realer DOM gemountet wird

3. beforeMount – Lifecycle-Hook-Funktion wird ausgeführt

4.Erstellen … – den virtuellen DOM und die gerenderten Daten an den realen DOM anhängen

5. Der echte DOM wird gemountet

6.mounted – Lifecycle-Hook-Funktion wird ausgeführt

<Vorlage>
  <div>
      <p>Lernlebenszyklus - siehe Konsolendruck</p>
      <p id="myP">{{ msg }}</p>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    // ...Andere Codes weglassen// 2. Mounten// Vor dem eigentlichen DOM-Mounten// Szenario: Daten vorverarbeiten, löst die aktualisierte Hook-Funktion beforeMount(){ nicht aus.
        console.log("beforeMount – Ausführung");
        console.log(document.getElementById("myP")); // null
 
        this.msg = "Neu bewerten"
    },
    // Nachdem der echte DOM gemountet wurde // Szenario: Echter DOM nach dem Mounten
    montiert(){
        console.log("gemountet -- ausgeführt");
        console.log(document.getElementById("myP")); // p
    }
}
</Skript>

2.4 Aktualisierungsphase

1. Wenn sich die Daten in den Daten ändern, bevor DOM aktualisiert wird

2.beforeUpdate – Lifecycle-Hook-Funktion wird ausgeführt

3. Virtuelles DOM… – Virtuelles DOM neu rendern, Patchen auf reales DOM

4.aktualisiert – Lifecycle-Hook-Funktion wird ausgeführt

5. Wenn sich die Daten ändern – wiederholen Sie den Zyklus

<Vorlage>
  <div>
      <p>Lernlebenszyklus - siehe Konsolendruck</p>
      <p id="myP">{{ msg }}</p>
      <ul id="meinUL">
          <li v-for="(Wert, Index) in arr" :Schlüssel="Index">
              {{ val }}
          </li>
      </ul>
      <button @click="arr.push(1000)">Klicken Sie am Ende, um einen Wert hinzuzufügen</button>
  </div>
</Vorlage>
 
<Skript>
Standard exportieren {
    Daten(){
        zurückkehren {
            Nachricht: "Hallo, Vue",
            arr: [5, 8, 2, 1]
        }
    },
  
    // 3. Update // Voraussetzung: nur ausführen, wenn sich Daten ändern // Vor dem Update beforeUpdate(){
        console.log("vorUpdate - ausführen");
        console.log(document.querySelectorAll("#myUL>li")[4]); // undefiniert
    },
    // Nach dem Update // Szenario: Den aktualisierten realen DOM abrufen
    aktualisiert(){
        console.log("aktualisiert – ausgeführt");
        console.log(document.querySelectorAll("#myUL>li")[4]); // li
    }
}
</Skript>

2.5 Zerstörungsphase

1. Wenn $destroy() aufgerufen wird – beispielsweise wird die Komponente DOM entfernt (z. B. v-if)

2. beforeDestroy – Lifecycle-Hook-Funktion wird ausgeführt

3. Datenmonitore, Unterkomponenten und Ereignislistener zerlegen

4. Nachdem die Instanz zerstört wurde, wird schließlich eine Hook-Funktion ausgelöst

5.zerstört – Lifecycle-Hook-Funktion wird ausgeführt

<Skript>
Standard exportieren {
    // ...Andere Codes werden weggelassen// 4. Zerstörung// Voraussetzung: v-if="false" Vue-Instanz zerstören// Szenario: Globale Ereignisse entfernen, aktuelle Komponenten, Timer, Timer, eventBus entfernen Ereignisse $off-Methode beforeDestroy(){
        // console.log('beforeDestroy – ausgeführt');
        Intervall löschen(dieser.Timer)
    },
    zerstört()
        // console.log("zerstört – ausgeführt");
    }
}
</Skript>

endlich:

Fragen im Vorstellungsgespräch:

1. Aus wie vielen Phasen besteht der Vue-Lebenszyklus?

(1) vorErstellen

Wird nach der Initialisierung der Instanz, aber vor der Datenbeobachter- und Ereignis-/Watcher-Konfiguration aufgerufen.

(2) erstellt

Wird unmittelbar nach der Erstellung der Instanz aufgerufen. In diesem Schritt hat die Instanz die folgenden Konfigurationen abgeschlossen: Datenbeobachter, Eigenschafts- und Methodenoperationen und Überwachungs-/Ereignisrückrufe. Allerdings hat die Mounting-Phase noch nicht begonnen und die Eigenschaft $el ist derzeit nicht sichtbar.

(3) vorMount

Wird aufgerufen, bevor das Mounten beginnt: Die zugehörige Renderfunktion wird zum ersten Mal aufgerufen.

(4) montiert

el wird durch das neu erstellte vm.$el ersetzt und der Hook wird aufgerufen, nachdem er auf der Instanz gemountet wurde. Wenn die Stamminstanz ein In-Document-Element mountet, befindet sich „vm.$el“ auch im Dokument, wenn „mounted“ aufgerufen wird.

(5) vorUpdate

Wird aufgerufen, wenn Daten aktualisiert werden, bevor der virtuelle DOM gepatcht wird. Dies ist nützlich für den Zugriff auf das vorhandene DOM vor dessen Aktualisierung, beispielsweise zum manuellen Entfernen hinzugefügter Ereignis-Listener. Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen, da nur das anfängliche Rendering auf dem Server stattfindet.

(6) aktualisiert

Dieser Hook wird aufgerufen, nachdem der virtuelle DOM aufgrund von Datenänderungen neu gerendert und gepatcht wurde.

(7) aktiviert

Wird aufgerufen, wenn die Keep-Alive-Komponente aktiviert wird. Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.

(8) Deaktiviert

Wird aufgerufen, wenn die Keep-Alive-Komponente deaktiviert wird. Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.

(9) vorZerstören

Wird aufgerufen, bevor die Instanz zerstört wird. In diesem Schritt ist die Instanz noch vollständig nutzbar. Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.

(10) zerstört

Wird aufgerufen, nachdem die Vue-Instanz zerstört wurde. Nach dem Aufruf wird die Bindung von allem, worauf die Vue-Instanz zeigt, aufgehoben, alle Ereignis-Listener werden entfernt und alle untergeordneten Instanzen werden zerstört. Dieser Hook wird während des serverseitigen Renderings nicht aufgerufen.

(11) errorCaptured (neu in 2.5.0+)

Wird aufgerufen, wenn ein Fehler von einer untergeordneten Komponente abgefangen wird. Dieser Hook empfängt drei Parameter: das Fehlerobjekt, die Komponenteninstanz, bei der der Fehler aufgetreten ist, und eine Zeichenfolge mit Informationen zum Ursprung des Fehlers. Dieser Hook kann „False“ zurückgeben, um die weitere Ausbreitung des Fehlers zu verhindern.

2. Welche Hook-Funktionen werden beim ersten Laden der Seite ausgelöst?

beforeCreate, erstellt, beforeMount, gemountet diese Hook-Funktionen

Zusammenfassen

Dies ist das Ende dieses Artikels über den Vue-Lebenszyklus und Hook-Funktionen. Weitere relevante Inhalte zum Vue-Lebenszyklus und zu Hook-Funktionen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!