Vorwort: Jede Die Funktionen, die den Lebenszyklus im Quellcode letztendlich ausführen, rufen alle die Methode 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 1. vorErstellen & erstellt Sowohl 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 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 2. vor der Montage und montiert Wie der Name schon sagt, tritt die Hook-Funktion 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 Nachdem der 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 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 3. vorUpdate & aktualisiert Wie der Name schon sagt, sollte die Ausführungszeit Die Ausführungszeit von 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 Der Ausführungszeitpunkt des 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 Wir haben bereits erwähnt, dass während des 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 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 4. vorZerstören & zerstört Wie der Name schon sagt 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 Während der Ausführung von $destroy wird 5. Aktiviert & Deaktiviert Die aktivierten und 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 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! Das könnte Sie auch interessieren:
|
<<: Zusammenfassung der MySQL-Nutzungsspezifikationen
Index Condition Pushdown (ICP) wird in MySQL 5.6 ...
Nehmen wir als Beispiel das Übersetzungsprogramm....
Herzattribute opacity: .999 erstellt einen Stapel...
Szenario: Beim Starten von Tomcat in Docker (Vers...
Xrdp ist eine Open-Source-Implementierung des Rem...
Wenn wir CSS schreiben, vergessen wir manchmal di...
Vorwort Glauben Sie mir, solange Sie sich an die ...
Bei der Installation in MySQL 8.0.16 können einig...
1. Datenbankdaten simulieren 1-1 Datenbank- und T...
1 Herunterladen Die Adresse lautet: https://dev.m...
Ein WeakMap-Objekt ist eine Sammlung von Schlüsse...
MySQL 5.7.13 Installations-Tutorial für Mac, sehr...
Inhaltsverzeichnis 1. Docker installieren 2. Code...
In diesem Artikel wird der spezifische JavaScript...
Wenn Sie das Idea-Entwicklungstool zum Debuggen v...