Dieser Artikel hilft Ihnen, den Lebenszyklus in Vue zu verstehen

Vorwort:

Jede Vue Instanz durchläuft vor ihrer Erstellung eine Reihe von Initialisierungsprozessen. Sie müssen beispielsweise die Datenüberwachung einrichten, Vorlagen kompilieren, Instanzen in DOM bereitstellen und DOM aktualisieren, wenn sich Daten ändern. Gleichzeitig werden während dieses Vorgangs auch einige Funktionen, sogenannte Lifecycle-Hooks, ausgeführt, die den Benutzern die Möglichkeit geben, in bestimmten Szenarien ihren eigenen Code hinzuzufügen.

Die Funktionen, die den Lebenszyklus im Quellcode letztendlich ausführen, rufen alle die Methode callHook auf, die in src/core/instance/lifecycle definiert ist:

Exportfunktion callHook (vm: Komponente, Hook: Zeichenfolge) {
 // #7573 Deaktivierung der Dep-Sammlung beim Aufrufen von Lifecycle-Hooks
  Ziel drücken()
  const handlers = vm.$optionen[hook]
  wenn (Handler) {
    für (sei i = 0, j = Handlerlänge; i < j; i++) {
      versuchen {
        handlers[i].aufruf(vm)
      } fangen (e) {
        Fehlerbehandlung(e, vm, `${hook} hook`)
      }
    }
  }
  wenn (vm._hasHookEvent) {
    vm.$emit('Haken:' + Haken)
  }
  popZiel()
}

Die Logik callHook -Funktion ist sehr einfach. Gemäß dem übergebenen String-Hook ruft sie das Callback-Funktionsarray ab, das vm.$options[hook] entspricht, durchläuft es und führt es aus. Bei der Ausführung wird vm als Kontext der Funktionsausführung verwendet.

1. vorErstellen & erstellt

Sowohl beforeCreate als auch created -Funktion werden in der _init-Methode ausgeführt, wenn Vue instanziiert wird. Sie ist in src/core/instance/init.js definiert:

Vue.prototype._init = Funktion (Optionen?: Objekt) {
  // ...
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'vorErstellen')
  initInjections(vm) // Injektionen vor Daten/Eigenschaften auflösen
  initState(vm)
  initProvide(vm) // provide nach data/props auflösen
  callHook(vm, 'erstellt')
  // ...
}

Sie können sehen, dass die Hook-Aufrufe von beforeCreate und created vor und nach initState erfolgen. Die Funktion von initState besteht darin, props , data , methods , watch , computed und andere Eigenschaften zu initialisieren. Wir werden sie später im Detail analysieren. Offensichtlich kann die Hook-Funktion beforeCreate weder die in props und data definierten Werte abrufen, noch kann sie die in methods definierten Funktionen aufrufen.

Wenn diese beiden Hook-Funktionen ausgeführt werden, wird das DOM nicht gerendert, sodass wir nicht auf das DOM zugreifen können. Wenn die Komponente beim Laden im Allgemeinen mit dem Backend interagieren muss, kann sie in diesen beiden Hook-Funktionen ausgeführt werden. Wenn Sie auf props , data und andere Daten zugreifen müssen, müssen Sie die created Hook-Funktion verwenden. Wenn wir später vue-router und Vuex vorstellen, werden wir feststellen, dass beide die Hook-Funktion beforeCreatd mischen.

2. vor der Montage und montiert

Wie der Name schon sagt, tritt die Hook-Funktion beforeMount beim mount auf, also bevor das DOM gemountet wird. Sie wird in der Funktion mountComponent aufgerufen, die in src/core/instance/lifecycle.js definiert ist:

Exportfunktion mountComponent (
  vm: Komponente,
  el: ?Element,
  hydratisierend?: Boolesch
): Komponente {
  vm.$el = el
  // ...
  callHook(vm, 'vor Mount')
 
  let updateComponent
  /* istanbul ignorieren wenn */
  wenn (Prozess.Umgebung.NODE_ENV !== 'Produktion' && Konfiguration.Leistung && Markierung) {
    updateComponent = () => {
      Konstantenname = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`
 
      Markierung(Starttag)
      const vnode = vm._render()
      Markierung(EndeTag)
      Maßnahme(`vue ${name} render`, Starttag, Endtag)
 
      Markierung(Starttag)
      vm._update(vnode, hydratisieren)
      Markierung(EndeTag)
      Maßnahme(`vue ${name} patch`, Starttag, Endtag)
    }
  } anders {
    updateComponent = () => {
      vm._update(vm._render(), hydratisieren)
    }
  }
 
  // wir setzen dies auf vm._watcher im Konstruktor des Watchers
  // da der erste Patch des Watchers $forceUpdate aufrufen kann (z. B. innerhalb des untergeordneten
  // Mounted Hook der Komponente), der darauf basiert, dass vm._watcher bereits definiert ist
  neuer Watcher(vm, updateComponent, noop, {
    vor () {
      wenn (vm._isMounted) {
        callHook(vm, 'vorUpdate')
      }
    }
  }, true /* istRenderWatcher */)
  hydratisierend = falsch
 
  // manuell gemountete Instanz, auf „self“ gemountet aufrufen
  // Mounted wird für rendererstellte untergeordnete Komponenten in seinem eingefügten Hook aufgerufen.
  wenn (vm.$vnode == null) {
    vm._isMounted = wahr
    callHook(vm, 'gemountet')
  }
  VM zurückgeben
}

Vor der Ausführung der Funktion vm. render() zum Rendern des VNode wird die Hook-Funktion beforeMount ausgeführt vm. update() zum VNode patch auf das echte DOM wird der mouted Hook ausgeführt. Beachten Sie, dass es eine Beurteilungslogik für die Ausführung der mouted -Hook-Funktion gibt. Wenn vm.$vnode null ist, bedeutet dies, dass dies kein Komponenteninitialisierungsprozess ist, sondern ein Initialisierungsprozess durch externes new Vue . Also, wann wird eine Komponente mounted ?

Nachdem der VNode patch , wird die Funktion invokeInsertHook ausgeführt und die in insertedVnodeQueue gespeicherten Hook-Funktionen werden nacheinander ausgeführt. Sie ist in src/core/vdom/patch.js definiert:

Funktion invokeInsertHook (vnode, Warteschlange, initial) {
 // Verzögerung von Insert-Hooks für Komponenten-Root-Nodes, rufe sie auf nach dem
  // Element wird wirklich eingefügt
  wenn (istTrue(initial) und isDef(vnode.parent)) {
    vnode.parent.data.pendingInsert = Warteschlange
  } anders {
    für (lass i = 0; i < Warteschlangenlänge; ++i) {
      Warteschlange[i].data.hook.insert(Warteschlange[i])
    }
  }
}

Diese Funktion führt die insert Hook-Funktion aus. Für Komponenten ist die Insert-Hook-Funktion in componentVNodeHooks in src/core/vdom/create-component.js definiert:

const KomponenteVNodeHooks = {
  // ...
  einfügen (vnode: MountedComponentVNode) {
    const { Kontext, Komponenteninstanz } = vnode
    wenn (!componentInstance._isMounted) {
      componentInstance._isMounted = true
      callHook(Komponenteninstanz, 'gemountet')
    }
    // ...
  },
}

Wir können sehen, dass jede untergeordnete Komponente die mouted Hook-Funktion in dieser Hook-Funktion ausführt, und wir haben zuvor analysiert, dass die Reihenfolge des Hinzufügens insertedVnodeQueue zuerst das untergeordnete und dann das übergeordnete Element ist. Daher ist für synchron gerenderte untergeordnete Komponenten die Ausführungsreihenfolge der mounted Hook-Funktion auch zuerst das untergeordnete und dann das übergeordnete Element.

3. vorUpdate & aktualisiert

Wie der Name schon sagt, sollte die Ausführungszeit beforeUpdate und updated der Zeitpunkt sein, an dem die Daten aktualisiert werden. Bisher haben wir die bidirektionale Bindung und Aktualisierung Vue -Daten noch nicht analysiert. Ich werde diesen Prozess im nächsten Kapitel ausführlich vorstellen.

Die Ausführungszeit von beforeUpdate liegt in der before -Funktion des Rendering- Watcher

Exportfunktion mountComponent (
  vm: Komponente,
  el: ?Element,
  hydratisierend?: Boolesch
): Komponente {
  // ...
 
  // wir setzen dies auf vm._watcher im Konstruktor des Watchers
  // da der erste Patch des Watchers $forceUpdate aufrufen kann (z. B. innerhalb des untergeordneten
  // Mounted Hook der Komponente), der darauf basiert, dass vm._watcher bereits definiert ist
  neuer Watcher(vm, updateComponent, noop, {
    vor () {
      wenn (vm._isMounted) {
        callHook(vm, 'vorUpdate')
      }
    }
  }, true /* istRenderWatcher */)
  // ...
}

Beachten Sie, dass hier eine Beurteilung erfolgt, d. h. diese Hook-Funktion wird erst aufgerufen, nachdem die Komponente mounted wurde.

Der Ausführungszeitpunkt des update ist der Aufruf der Funktion flushSchedulerQueue “, die in src/core/observer/scheduler.js definiert ist:

Funktion flushSchedulerQueue () {
  // ...
  // Holen Sie sich die aktualisierte Warteschlange
  rufUpdatedHooks auf(aktualisierteWarteschlange)
}
 
Funktion callUpdatedHooks (Warteschlange) {
  sei i = Warteschlangenlänge
  während (i--) {
    const watcher = Warteschlange[i]
    const vm = watcher.vm
    wenn (vm._watcher === watcher && vm._isMounted) {
      callHook(vm, 'aktualisiert')
    }
  }
}

Wir werden die Funktion flushSchedulerQueue später ausführlich vorstellen, aber Sie können sich zunächst einen allgemeinen Überblick verschaffen. updatedQueue ist ein Array aktualisierter wathcer . In der Funktion callUpdatedHooks werden diese Arrays durchlaufen. Die updated Hook-Funktion wird nur ausgeführt, wenn der aktuelle watcher vm._watcher ist und die Komponente mounted wurde.

Wir haben bereits erwähnt, dass während des mount ein Rendering Watcher instanziiert wird, um die Datenänderungen auf der VM abzuhören und erneut zu rendern. Diese Logik tritt auf, wenn mountComponent ausgeführt wird:

Exportfunktion mountComponent (
  vm: Komponente,
  el: ?Element,
  hydratisierend?: Boolesch
): Komponente {
  // ...
  // Dies ist eine Kurzform: let updateComponent = () => {
      vm._update(vm._render(), hydratisieren)
  }
  neuer Watcher(vm, updateComponent, noop, {
    vor () {
      wenn (vm._isMounted) {
        callHook(vm, 'vorUpdate')
      }
    }
  }, true /* istRenderWatcher */)
  // ...
}

Anschließend wird beim Instanziieren Watcher in seinem Konstruktor über isRenderWatcher entschieden und anschließend die aktuelle watcher -Instanz vm._watcher zugewiesen, das in src/core/observer/watcher.js definiert ist:

exportiere Standardklasse Watcher {
  // ...
  Konstruktor (
    vm: Komponente,
    expOrFn: Zeichenfolge | Funktion,
    cb: Funktion,
    Optionen?: ?Objekt,
    istRenderWatcher?: Boolesch
  ) {
    dies.vm = vm
    wenn (istRenderWatcher) {
      vm._watcher = dies
    }
    vm._watchers.push(dies)
    // ...
  }
}

Gleichzeitig wird die aktuelle wathcer Instanz an vm. watchers gesendet vm. watcher wird speziell verwendet, um Datenänderungen auf der VM zu überwachen und dann erneut zu rendern, es handelt sich also um einen Rendering-bezogenen watcher . Daher wird in der Funktion callUpdatedHooks die updated Hook-Funktion erst ausgeführt, nachdem der Rückruf von vm._watcher ausgeführt wurde.

4. vorZerstören & zerstört

Wie der Name schon sagt ，beforeDestroy und destroyed in der Phase der Komponentenzerstörung. Der Prozess der Komponentenzerstörung wird später ausführlich vorgestellt, und am Ende wird die Methode $ destroy aufgerufen. Sie ist in src/core/instance/lifecycle.js definiert:

Vue.prototype.$destroy = Funktion () {
    const vm:Komponente = diese
    wenn (vm._isBeingDestroyed) {
      zurückkehren
    }
    callHook(vm, 'vor Zerstörung')
    vm._isBeingDestroyed = true
    // sich selbst vom übergeordneten Element entfernen
    const parent = vm.$parent
    wenn (übergeordnet && !parent._isBeingDestroyed && !vm.$options.abstract) {
      entfernen(Elternteil.$Kinder, vm)
    }
    // Teardown-Beobachter
    wenn (vm._watcher) {
      vm._watcher.teardown()
    }
    sei i = vm._watchers.length
    während (i--) {
      vm._watchers[i].teardown()
    }
    // Referenz aus Datenobjekt entfernen
    // Eingefrorenes Objekt hat möglicherweise keinen Beobachter.
    wenn (vm._data.__ob__) {
      vm._data.__ob__.vmCount--
    }
    // rufe den letzten Hook auf …
    vm._isDestroyed = true
    // rufe Destroy-Hooks im aktuell gerenderten Baum auf
    vm.__patch__(vm._vnode, null)
    // Feuer zerstört Haken
    callHook(vm, 'zerstört')
    // alle Instanz-Listener ausschalten.
    vm.$off()
    // __vue__-Referenz entfernen
    wenn (vm.$el) {
      vm.$el.__vue__ = null
    }
    // Zirkuläre Referenz freigeben (#6759)
    wenn (vm.$vnode) {
      vm.$vnode.parent = null
    }
  }

Die Hook-Funktion beforeDestroy wird ganz am Anfang der Ausführung der destroy -Funktion ausgeführt und führt dann eine Reihe von Zerstörungsaktionen aus, darunter das Löschen seiner selbst aus parent children des übergeordneten Elements, das Löschen watcher , das Ausführen der Destroy-Hook-Funktion des aktuell gerenderten VNode usw. Nachdem die Ausführung abgeschlossen ist, wird die destroy Hook-Funktion erneut aufgerufen.

Während der Ausführung von $destroy wird vm. patch (vm._vnode, null) ausgeführt, um die Destroy-Hook-Funktion seiner untergeordneten Komponenten auszulösen. Der rekursive Aufruf erfolgt also Schicht für Schicht. Die Ausführungsreihenfolge destroy Hook-Funktion ist also zuerst das untergeordnete Element und dann das übergeordnete Element, was mit dem gemounteten Prozess identisch ist.

5. Aktiviert & Deaktiviert

Die aktivierten und deactivated Hook-Funktionen sind speziell für die keep-alive Komponente angepasste Hooks. Wir werden sie bei der Einführung keep-alive Komponente ausführlich vorstellen. Lassen wir es hier mal so stehen.

Zusammenfassen:

In diesem Abschnitt werden hauptsächlich die Ausführungszeitpunkte und -reihenfolge jeder Hook-Funktion im Vue-Lebenszyklus vorgestellt. Durch Analyse wissen wir, dass wir in der Hook-Funktion created auf Daten zugreifen, in der Hook-Funktion „ mounted “ auf DOM zugreifen und in der Hook-Funktion destroy einige Timer-Zerstörungsarbeiten durchführen können. Wenn wir diese verstehen, können wir im entsprechenden Lebenszyklus verschiedene Dinge tun.

Dies ist das Ende dieses Artikels zum Verständnis des Lebenszyklus in Vue. Weitere Inhalte zum Lebenszyklus in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!