So rufen Sie Funktionen während der Vue3-Initialisierung auf

Vue3-Initialisierungsaufruffunktion

createApp({}).mount(‘#app')

Eintragsdatei runtime-dom/src/index.tx

• createApp -> createRenderer -> (hier werden auch die Renderfunktion und eine Reihe von Renderfunktionen erstellt) -> createAppAPI (gibt die echte createApp-Methode zurück),

• und dann app.mount("#app") -> render(vnode,rootcontainier,isSVG) -> ;processComponent -> mountComponent (erstes Rendering) oder updateComponent ->(createComponentInstance, setupComponent, setupRenderEffect)

• Für setupComponent wird es von Fall zu Fall gehandhabt, ob es eine Setup-Funktion gibt oder nicht Wenn dies der Fall ist, verwenden Sie die Setup-Funktion für die Verarbeitung und Initialisierung von Requisiten und anderen Parametern, die an die Setup-Funktion übergeben werden müssen. Rufen Sie setupComponent->finishComponentSetup auf (die Initialisierung der 2.x-Versionsoptionen wird hier verarbeitet).

• Führen Sie für setupRenderEffect eine Reihe von Life-Hook-Funktionen aus, um ein Rendering ReactiveEffect zu erstellen, und führen Sie die **effect.run()**-Methode aus

ReactiveEffect

ähnlich dem Watcher von vue2.x, berechnet, beobachten , ComponentUpdateFn verwendet während des Rendervorgangs auch ReactiveEffect,

const effect = new Nach ReactiveEffect(fn,...), mit der Ausnahme, dass das berechnete Attribut nur dann effect.run() aufruft, wenn darauf zugegriffen wird -> call fn() , greifen Sie auf die reaktiven Variablen in fn zu, sammeln Sie Abhängigkeiten und den Rest. setupRenderEffect, watch, watchEffect ruft effect.run() auf, nachdem ReactiveEffect erstellt wurde, um Abhängigkeiten zu sammeln, wobei

• setupRenderEffect auf die zugreift abhängige Antwortvariablen setupRenderEffect会访问依赖的响应变量

• watch(source,cb,options),会执行访问source的函数,收集依赖

• watchEffect(fn),会自动执行一次fn收集依赖

• effect(fn,options)

watch(source,cb,options), führt die Funktion aus, um auf die Quelle zuzugreifen und Abhängigkeiten zu sammeln

watchEffect(fn), Führt fn automatisch einmal aus, um Abhängigkeiten zu sammeln Führen Sie die Funktion aus, rufen Sie run () erneut auf, führen Sie die fn-Funktion einmal aus und sammeln Sie Abhängigkeiten verwendet die Methode createApp. Was passiert in createApp?

Grund für das Umschreiben

createApp ist eine Factory-Funktion in Vue, die als Funktion importiert und aufgerufen wird. Die Vorteile des funktionalen Stils sind

1. Es eliminiert die ursprünglich auf Vue bereitgestellten statischen Methoden und wandelt sie in Instanzmethoden um, was die Speichernutzung reduzieren, das Schütteln von Bäumen erleichtern und die Verpackungsgröße reduzieren kann Die Unterstützung von TypeScript ist sehr gut. Die Funktionsaufrufmethode kann TypeScript besser unterstützen, wodurch die Typunterstützung 3 verbessert wird. Die API der Stammkomponente muss das gleiche Format beibehalten wie die API der Unterkomponente von $ Mount wird in mount geändert, was die API vereinfacht und die Konsistenz der API vereinheitlicht

4 Die Mount-Methode im neuen Vue führt zu einer globalen Verschmutzung und kann nicht unabhängig voneinander sein und bei Bedarf gemountet werden.

Prozessimplementierung

mount

// 1.计算属性
// computed.ts
// ComputedRefImpl类构造函数调用了new ReactiveEffect
this.effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true
        triggerRefValue(this)
      }
    })
    
// 2. effect
// effect.ts
// effect函数中,可以接收第二个参数effect(fn,{lazy:true}),表示不立即执行
  const _effect = new ReactiveEffect(fn)
// 3. apiWatch.ts doWatch方法
// watch和watchEffect都是通过doWatch函数来,在这里调用new ReactiveEffect,然后根据不同情况执行effect.run(),对于watchEffect就是//执行器回调,对于watch就是访问监听的数据,然后收集依赖
  const effect = new ReactiveEffect(getter, scheduler)
// 4. render.ts
//在 setupRenderEffect中
const effect = (instance.effect = new ReactiveEffect(
      componentUpdateFn,//更新组件函数
      () => queueJob(update),
      instance.scope // track it in component's effect scope
    ))

Wenn beim Aufruf von createApp kein Render in den Optionen vorhanden ist, initialisieren Sie die Komponente, rufen Sie „Compile“ auf, um ein Render zu generieren, und wenn es ein Render gibt, mounten Sie es direkt Vue2, Elemente hinzufügen mit Im Gegensatz zur Vergleichs- und Ersetzungsmethode werden Vergleiche und Beurteilungen durchgeführt, wenn die Unterschiede zwischen Diff-Elementen verglichen werden. In Vue3 werden Elemente direkt gelöscht und erneut hinzugefügt.

Reaktive Variablen können im Setup oder in den Daten definiert werden, Setup hat höhere Priorität.

createApp

Die beiden von Vue bereitgestellten Initialisierungsfunktionen createApp und createRenderer, die aufrufende Beziehung zwischen ihnen

const Vue = {
	createApp(options) {
		//返回app实例
		return {
			mount(selector){
				// 获取渲染函数，编译结果
				// 渲染dom，追加到宿主元素
			}
			compile(template){
			//返回render
				return function render(){
					//描述视图
				}
			}
		}
	}
}

Quellcode-Prozess

1 Der Benutzer ruft die createApp-Methode auf => Holen Sie sich den Renderer über secureRenderer

2 . Der Renderer ruft createRender =》※ auf. Diese Funktion definiert Patches, Diffs usw. und gibt schließlich ein Render zurück, das zum Rendern der Spa-Seite verwendet wird, und ein Hydrat, das zum Injizieren von Wasser in die SSR-Seite verwendet wird Funktion. createApp (anders als Vues createApp)

3. In der createApp-Funktion werden Instanzmethoden des Programms definiert, wie z. B. mount, get, set, use, mixin usw.

4 Überprüfen Sie, ob eine Root-Komponente hängt. Welche Methode zum Mounten verwendet werden soll (spa/ssr)

5 Die Render-Methode ruft die Patch-Methode zum Patchen auf

6. Die Patch-Methode bestimmt die Mount-Methode basierend auf dem eingehenden Knotentyp . Wenn es zum ersten Mal gemountet wird, mounten Sie die Komponente, dann mounten Sie das Element (die Patch-Methode konvertiert den Vnode in den Knotenknoten)

7 Die Patch-Methode führt die interne ProcessComponent-Methode aus und führt schließlich die MountComponent-Methode aus Ausführungsmethode von $mount in Vue2

Initialisierungsprozess

1. Instanziierung der Root-Komponente: Aufruf von createComponentInstance

2. Initialisierung der Root-Komponente: Aufruf der setupComponent-Methode, die in Vue2 verwendet wird um Optionen zusammenzuführen und Hooks und Reaktionsfähigkeit einzurichten

3. Installieren Sie die Nebeneffektfunktion der Renderfunktion: setupRendererEffect

In Vue3 wurde der Watcher abgebrochen und durch eine Nebeneffektfunktion ersetzt, die jedes Mal neu ausgeführt wird, wenn sich die Reaktionsdaten ändern Bei Änderungen wird die reaktionsfähige Komponente aktualisiert.

PS: Der Unterschied zu useEffect in React besteht darin, dass useEffect eine manuelle Erfassung von Abhängigkeiten erfordert, während effect() in Vue Abhängigkeiten automatisch erfasst.

Das obige ist der detaillierte Inhalt vonSo rufen Sie Funktionen während der Vue3-Initialisierung auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!