Vue3初始化怎么調用函數

這篇文章主要介紹“Vue3初始化怎么調用函數”，在日常操作中，相信很多人在Vue3初始化怎么調用函數問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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 ->(createComponentInstance , setupComponent,setupRenderEffect)

• 對于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程序初始化流程

初始化

在vue3中，程序的初始化不再沿用vue2的new Vue()方法，而是使用了createApp。在createApp中發生了什么呢？

改寫的原因

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

1、消滅了原來掛載在Vue上的靜態方法，變成實例方法，可以減少內存占用，便于tree-shaking，減小了打包體積；

2、因為函數式和class裝飾器對ts的支持好，使用函數的方式調用，可以更好的支持ts，提高類型支持

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初始化怎么調用函數”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！