Vue3初始化怎麼呼叫函數

Vue3初始化呼叫函數

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

入口檔runtime-dom/src/index.tx

• createApp -> createRenderer -> createBaseRenderer(這裡也創建了render函數以及一系列渲染時的函數) -> createAppAPI(返回了真正的createApp方法),返回了實例app,

• 然後app.mount(“#app” ) -> createVNode -> render(vnode,rootcontainier,isSVG) -> patch -> processComponent -> mountComponent(初次渲染)或是updateComponent ->

#對於setupComponent,有setup函數和沒有setup函數分情況處理,如果有就走setup函數處理,初始化props等需要傳遞給setup函數的參數,調用setup,setupComponent->finishComponentSetup(在這裡會處理2.x版本的options選項初始化),
對於setupRenderEffect,執行一系列生命鉤子函數,創建渲染ReactiveEffect,並執行了**effect.run()* *方法
ReactiveEffect

類似vue2.x 的Watcher, computed,watch,渲染過程中componentUpdateFn也使用了ReactiveEffect,

const effect = new ReactiveEffect(fn,…)後,除了計算屬性會在被訪問時才去調用effect.run()->調用fn(),在fn裡訪問響應式變量,收集依賴,其餘的setupRenderEffect,watch,watchEffect,都會在創建ReactiveEffect後調用effect.run()收集依賴,其中

• setupRenderEffect

  會存取依賴的回應變數

• watch(source,cb,options)

  ,會執行存取source的函數,收集依賴

• watchEffect(fn)

  ,會自動執行一次fn收集依賴

• #effect(fn,options)

  ,其中options有個lazy:true選項,表示不立即執行fn函數收集依賴,返回一個run函數,再次調用run(),執行一次fn函數,收集依賴

  #

  // 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
      ))

Vue3程式初始化流程

初始化

Vue 3 不再使用Vue2 的new Vue() 方法進行程式初始化，而是採用了createApp 方法。在createApp中發生了什麼事？

改寫的原因

createApp是一個Vue中的工廠函數，以函數的方式進行導入和呼叫。而函數式的好處是

1、消滅了原先掛載在Vue上的靜態方法，變成實例方法，可以減少記憶體佔用，便於tree-shaking，減少了打包體積；

函數式和類別裝飾器在TypeScript 的支援性很好，使用函數呼叫的方式可以更好地支援TypeScript，從而提高類型支援

3、根元件的api，如data要和子元件的api保持相同的格式，掛載從$mount改為mount，簡化了api並統一了api的一致性

4、new Vue中掛載的方法會造成全局污染，不能獨立出來，createApp可以相互獨立，並按需掛載。

流程實作

mount

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

在呼叫createApp時，如果options中無render，則初始化元件，呼叫compile產生一個render，若有render則直接掛載；

在Vue2中，加入元素使用了比較替換的方式，在diff元素之間的差異時進行對比判斷，而在Vue3中，會直接刪除並重新添加元素。

可以在setup或data定義響應式變量， setup的優先權更高。

createApp

Vue揭露的兩個初始化的函數，createApp和createRenderer，他們之間的呼叫關係 

/*暴露给Vue的createApp*/
function createApp(options){
    const renderer =  Vue.createRenderer({
        /*定义一些平台特有的api，一些实例*/
        aaa(){},
        bbb(){}
    })
    /*用户调用的createApp，实际上是渲染器的createApp*/
    return renderer.createApp()
}
function createRenderer({aaa,bbb}){
    /*获得渲染器*/
    /*这个createApp是函数内部的*/
    return createApp(options){
        /*挂载逻辑*/
        return {
            /*返回App实例*/
        }
    }
}

原始碼流程

1、使用者呼叫createApp方法=》 透過ensureRenderer得到渲染器

2、渲染器呼叫createRender =》※呼叫工廠函數baseGreateRenderer，這個函數中定義了patch和diff等，最終會return一個render用來給spa頁面渲染，一個hydrate用來給ssr頁面注水，還有一個函數的createApp（不同於Vue的createApp）

3、在函數的createApp中會定義程式的實例方法，如mount，get，set，use，mixin等

4、mount實例方法會去查看是否有根元件掛載，使用什麼方法進行掛載（spa/ssr）

5、render方法呼叫patch方法進行打補丁

6、patch方法根據傳入的節點類型進行掛載方法的判斷，如果首次掛載則為掛載component，之後是掛載element( patch方法會將vnode轉換為node節點)

7、patch方法執行內部processComponent方法，最後執行mountComponent方法，也就是Vue2中$mount最終執行的方法

#初始化流程

1、根元件的實例化：呼叫createComponentInstance

2、初始化根元件：呼叫setupComponent方法，也就是Vue2中的this.$_init方法，用來將選項合併，並設定鉤子和響應式

3、安裝render函數的副作用函數：setupRendererEffect

在Vue3中取消了watcher改為副作用函數，副作用函數會在每次響應式資料發生變化的時候重新執行，內部的render函數的執行會觸發依賴收集，這樣當響應式資料變化時，響應式組件就會更新。

PS：與react中的useEffect不同的方面是，useEffect需要手動的收集依賴，而Vue中的effect()會自動的收集依賴。 

以上是Vue3初始化怎麼呼叫函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！