Super detaillierte Vue-Lebenszyklusanalyse

Vues Lebenszyklus

Der Lebenszyklus von Vue ist das Wissen, das jeder Front-End-Mitarbeiter, der das Vue-Framework verwendet, beherrschen und als Datensatz verwenden muss.
Der Lebenszyklus von Vue ist der gesamte Prozess von der Erstellung bis zur Zerstörung der Vue-Instanz, dh der Beginn von new Vue() ist der Beginn des Lebenszyklus von Vue. Eine Vue-Instanz hat einen vollständigen Lebenszyklus, d. h. eine Reihe von Prozessen vom Beginn der Erstellung, der Initialisierung von Daten, der Kompilierung von Vorlagen, dem Mounten von Dom -> Rendern, Aktualisieren -> Rendern, Entladen usw., die so genannt werden Der Lebenszyklus von Vue. Die Hook-Funktion ist eine zur Außenwelt offene Schnittstelle, über die Programmierer Vue in jeder Phase des Vue-Lebenszyklus bedienen können. Vue verfügt über 8 Hook-Funktionen.
Leihen Sie sich Yang Siyues Illustration des Vue-Lebenszyklus aus.

beforeCreate (vor der Erstellung)
Zu diesem Zeitpunkt, nachdem die Instanz erstellt wurde, werden el und Daten nicht initialisiert und es kann nicht auf Daten und Methoden zugegriffen werden. Im Allgemeinen werden zu diesem Zeitpunkt keine Vorgänge ausgeführt

beforeCreate() {
    
    
    console.log('----beforeCreate----')
    console.log(this.msg) //undefined
    console.log(this.$el) //undefined
  },

erstellt (nach der Erstellung)
Zu diesem Zeitpunkt wurden die Daten und Methoden in der Vue-Instanz initialisiert und die Eigenschaften wurden ebenfalls gebunden. Zu diesem Zeitpunkt handelt es sich jedoch noch um einen virtuellen Dom, da der Dom noch nicht generiert wurde $el ist noch nicht verfügbar. Zu diesem Zeitpunkt können die Daten und Methoden von Daten und Methoden aufgerufen werden. Die erstellte Hook-Funktion ist die früheste, die Daten und Methoden aufrufen kann, daher werden die Daten hier im Allgemeinen initialisiert.

created() {
    
    
    console.log('----created----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//undefined
  },

beforeMount (vor dem Mounten)
Die Vorlage wurde zu diesem Zeitpunkt kompiliert, aber noch nicht auf der Seite gerendert (dh der virtuelle Dom wird als echter Dom geladen), und el wird angezeigt, wenn el vorhanden ist. Hier ist die letzte Möglichkeit, die Daten vor dem Rendern zu ändern, ohne andere Hook-Funktionen auszulösen. Im Allgemeinen können Sie hier die Anfangsdaten abrufen.
Wenn in der Vue-Instanz el das Mount-Ziel ist und el nicht definiert ist, wird this.el als undefiniert angezeigt. Das Mount-Ziel kann jedoch auch identifiziert werden, wenn auf der Seite eine Vorlage vorhanden ist, da die Vorlage als Vorlage betrachtet werden kann Platzhalter. Falls definiert, wird es angezeigt

Daher kann beforeMount das echte EL nicht lesen und das echte EL kann erst nach dem Mounten gelesen werden, da EL erst nach Abschluss des Renderings vorhanden ist. Der hier genannte El ist der tatsächliche El. Bevor das echte El existiert, ist das in beforeMount tatsächlich #app auf der Seite, die das Ziel des Mounts ist

  beforeMount() {
    
    
    console.log('----beforeMount----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//undefined
  },

Die montierte (nach dem Mounten)
Vorlage wurde zu diesem Zeitpunkt in ein echtes DOM gerendert, und der Benutzer kann die gerenderte Seite bereits sehen, und die Daten der Seite werden auch durch bidirektionale Bindung in Daten angezeigt. Wenn die letzte Lebenszyklusfunktion während des Instanzerstellungszeitraums ausgeführt wird, bedeutet dies, dass die Instanz vollständig erstellt wurde. Wenn zu diesem Zeitpunkt kein anderer Vorgang ausgeführt wird, bleibt diese Instanz still in unserem Gedächtnis. Auf Schritt und Tritt.

mounted() {
    
    
    console.log('----mounted----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//<div id="app"><span model="msg"></span></div>
  },

Erstellen Sie ein Vue-Beispiel

<template>
  <div id="app">
    <span :model="msg"></span>
  </div>
</template>

<script>
export default {
    
    
  name: 'App',
  data() {
    
    
    return {
    
    
      msg: 'msg',
    }
  },
  beforeCreate() {
    
    
    console.log('----beforeCreate----')
    console.log(this.msg) //msg
    console.log(this.$el) //undefined
  },
  created() {
    
    
    console.log('----created----')
    console.log(this.msg)
    console.log(this.$el)
  },
  beforeMount() {
    
    
    console.log('----beforeMount----')
    console.log(this.msg)
    console.log(this.$el)
  },
  mounted() {
    
    
    console.log('----mounted----')
    console.log(this.msg)
    console.log(this.$el)
  },
}
</script>

Ergebnis:

beforeUpdate
aktualisiert den Status (bevor sich die Daten in der Ansichtsebene ändern, nicht bevor sich die Daten in den Daten ändern), löst vor dem erneuten Rendern aus und dann erstellt der virtuelle Dom-Mechanismus von Vue den virtuellen Dom und den letzten virtuellen Dom-Baum neu Der Diff-Algorithmus wird nach dem Vergleich erneut gerendert. Nur Datenänderungen in der Ansicht werden vor dem Aktualisieren und Aktualisieren ausgelöst, und Datenänderungen, die nur zu Daten gehören, können nicht ausgelöst werden.

Die aktualisierten
Daten wurden geändert und der Dom wurde neu gerendert.

Update-Instanz

<template>
  <div id="app">
    <div style="height:50px"
         ref="spanRef">{
    
    {
    
    msg}}</div>
    <button @click="clickBtn"></button>
  </div>
</template>

<script>
export default {
    
    
  name: 'App',
  data() {
    
    
    return {
    
    
      msg: 'msg',
    }
  },
  methods: {
    
    
    clickBtn() {
    
    
      this.msg = 'newMsg'
    },
  },
  beforeUpdate() {
    
    
    console.log('----beforeUpdate----')
    console.log(this.$refs.$el)
    console.log(this.msg) //msg
  },
  updated() {
    
    
    console.log('----updated----')
    console.log(this.$refs.$el)

    console.log(this.msg) //msg
  },
}
</script>

Fügen Sie eine Schaltfläche hinzu, binden Sie das Klickereignis an die Schaltfläche und aktualisieren Sie die Daten nach dem Klicken.

Hier besteht eine Diskrepanz mit dem Vue-Symbol. Das Vue-Symbol zeigt an, dass sich in der Phase beforeUpdate nur die Daten in den Daten geändert haben Der Versuch wurde nicht aktualisiert. Die Ansicht enthält immer noch alte Daten, aber im Beispiel gibt die Hook-Funktion beforeUpdate el aus, um zu sehen, dass die Daten in der Ansicht aktualisiert wurden. Nach Durchsicht der Daten stellte ich fest, dass die Datenaktualisierung der Ansichtsebene vor dem Update und der Aktualisierung ausgelöst wird. Wenn einige Daten in den Daten aktualisiert werden, diese Daten jedoch nicht an die Ansichtsebene gebunden sind, wird die Hook-Funktion zu diesem Zeitpunkt nicht ausgelöst. Aber nachdem ich darüber nachgedacht hatte, stellte ich fest, dass es immer noch falsch war. Was oben erklärt wurde, ist, dass die Hook-Funktion ausgelöst wird, wenn die von der Ansichtsebene angewendeten Daten aktualisiert werden.
Zu diesem Zeitpunkt kam der Druck auf mich zu. Nachdem ich darüber nachgedacht hatte, dachte ich plötzlich an console.log(this.refs.refs $refs.\; el)\; Dieser\; Ausgabecode,\; nachdem\; ich\; den\; Verzögerungscode\; zu\; beforeUpdate\; hinzugefügt\; hatte,$ wurde mir klar: console.log(this.refs.refs$refs.$ el) gibt die el aus, wenn die Daten$aktualisiert\; werden$

 beforeUpdate() {
    
    
    console.log('----beforeUpdate----')
    console.log(this.$el)
    console.log(this.msg) //msg
    for (var i = 0; i <= 10000; i++) {
    
    
      console.log(1)
    }
  },

this.$el wartet, bis die Datenaktualisierung abgeschlossen ist, bevor el ausgegeben wird.

beforeDestroy
wird vor der Zerstörung ausgeführt (wird ausgeführt, wenn die Methode $destroy aufgerufen wird), und dient im Allgemeinen dazu, die Folgen zu behandeln: Timer löschen, nicht an Anweisungen gebundene Ereignisse löschen usw. ')

Nach der Zerstörung
(das Dom-Element existiert, wird aber nicht mehr von Vue gesteuert) entladen Sie den Watcher, den Event-Listener und die Unterkomponenten.