Vue3初始化調(diào)用函數(shù)

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

入口文件 runtime-dom/src/index.tx

• createApp -> createRenderer -> createBaseRenderer(這里還創(chuàng)建了render函數(shù)以及一系列渲染時(shí)的函數(shù)) -> createAppAPI(返回了真正的createApp方法),返回了 實(shí)例 app,
• 然后 app.mount(“#app”) -> createVNode -> render(vnode,rootcontainier,isSVG) -> patch -> processComponent -> mountComponent(初次渲染)或者是updateComponent ->(createComponentInstance , setupComponent,setupRenderEffect)
• 對(duì)于setupComponent,有setup函數(shù)和沒有setup函數(shù)分情況處理,如果有就走setup函數(shù)處理,初始化props等需要傳遞給setup函數(shù)的參數(shù),調(diào)用setup,setupComponent->finishComponentSetup(在這里會(huì)處理 2.x版本的options選項(xiàng)初始化),
• 對(duì)于setupRenderEffect,執(zhí)行一系列生命鉤子函數(shù),創(chuàng)建渲染ReactiveEffect,并執(zhí)行了**effect.run()**方法

ReactiveEffect

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

const effect = new ReactiveEffect(fn,…)后,除了計(jì)算屬性會(huì)在被訪問時(shí)才去調(diào)用effect.run()->調(diào)用fn(),在fn里訪問響應(yīng)式變量,收集依賴,其余的setupRenderEffect,watch,watchEffect,均會(huì)在創(chuàng)建ReactiveEffect后調(diào)用effect.run()收集依賴,其中

• setupRenderEffect會(huì)訪問依賴的響應(yīng)變量
• watch(source,cb,options),會(huì)執(zhí)行訪問source的函數(shù),收集依賴
• watchEffect(fn),會(huì)自動(dòng)執(zhí)行一次fn收集依賴
• effect(fn,options),其中options有個(gè)lazy:true選項(xiàng),表示不立即執(zhí)行fn函數(shù)收集依賴,返回一個(gè)run函數(shù),再次調(diào)用run(),執(zhí)行一次fn函數(shù),收集依賴

// 1.計(jì)算屬性
// computed.ts
// ComputedRefImpl類構(gòu)造函數(shù)調(diào)用了new ReactiveEffect
this.effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true
        triggerRefValue(this)
      }
    })
    
// 2. effect
// effect.ts
// effect函數(shù)中,可以接收第二個(gè)參數(shù)effect(fn,{lazy:true}),表示不立即執(zhí)行
  const _effect = new ReactiveEffect(fn)
// 3. apiWatch.ts doWatch方法
// watch和watchEffect都是通過doWatch函數(shù)來,在這里調(diào)用new ReactiveEffect,然后根據(jù)不同情況執(zhí)行effect.run(),對(duì)于watchEffect就是//執(zhí)行器回調(diào),對(duì)于watch就是訪問監(jiān)聽的數(shù)據(jù),然后收集依賴
  const effect = new ReactiveEffect(getter, scheduler)
// 4. render.ts
//在 setupRenderEffect中
const effect = (instance.effect = new ReactiveEffect(
      componentUpdateFn,//更新組件函數(shù)
      () => queueJob(update),
      instance.scope // track it in component's effect scope
    ))

Vue3程序初始化流程

初始化

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

改寫的原因

createApp是一個(gè)Vue中的工廠函數(shù)，以函數(shù)的方式進(jìn)行導(dǎo)入和調(diào)用。而函數(shù)式的好處是

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

2、因?yàn)楹瘮?shù)式和class裝飾器對(duì)ts的支持好，使用函數(shù)的方式調(diào)用，可以更好的支持ts，提高類型支持

3、根組件的api，如data要和子組件的api保持相同的格式，掛載從$mount改為mount，簡(jiǎn)化了api并統(tǒng)一了api的一致性

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

流程實(shí)現(xiàn)

mount

const Vue = {
	createApp(options) {
		//返回app實(shí)例
		return {
			mount(selector){
				// 獲取渲染函數(shù)，編譯結(jié)果
				// 渲染dom，追加到宿主元素
			}
			compile(template){
			//返回render
				return function render(){
					//描述視圖
				}
			}
		}
	}
}

在調(diào)用createApp時(shí)，如果options中無render，則初始化組件，調(diào)用compile產(chǎn)生一個(gè)render，若有render則直接掛載；

Vue2中追加元素使用比較替換的方式，diff元素間區(qū)別進(jìn)行對(duì)比判斷，Vue3中則是直接進(jìn)行刪除重加。

可以在setup或者是data中定義響應(yīng)式變量， setup的優(yōu)先級(jí)更高。

createApp

Vue暴露的兩個(gè)初始化的函數(shù)，createApp和createRenderer，他們之間的調(diào)用關(guān)系 

/*暴露給Vue的createApp*/
function createApp(options){
?? ?const renderer = ?Vue.createRenderer({
?? ??? ?/*定義一些平臺(tái)特有的api，一些實(shí)例*/
?? ??? ?aaa(){},
?? ??? ?bbb(){}
?? ?})
?? ?/*用戶調(diào)用的createApp，實(shí)際上是渲染器的createApp*/
?? ?return renderer.createApp()
}
function createRenderer({aaa,bbb}){
?? ?/*獲得渲染器*/
?? ?/*這個(gè)createApp是函數(shù)內(nèi)部的*/
?? ?return createApp(options){
?? ??? ?/*掛載邏輯*/
?? ??? ?return {
?? ??? ??? ?/*返回App實(shí)例*/
?? ??? ?}
?? ?}
}

源碼流程

1、用戶調(diào)用createApp方法 =》 通過ensureRenderer得到渲染器

2、渲染器調(diào)用createRender =》※調(diào)用工廠函數(shù)baseGreateRenderer，這個(gè)函數(shù)中定義了patch和diff等，最終會(huì)return一個(gè)render用來給spa頁(yè)面進(jìn)行渲染，一個(gè)hydrate用來給ssr頁(yè)面進(jìn)行注水，還有一個(gè)函數(shù)的createApp（不同于Vue的createApp）

3、在函數(shù)的createApp中會(huì)定義程序的實(shí)例方法，如mount，get，set，use，mixin等

4、mount實(shí)例方法會(huì)去查看是否有根組件掛載，使用什么方法進(jìn)行掛載（spa/ssr）

5、render方法調(diào)用patch方法進(jìn)行打補(bǔ)丁

6、patch方法根據(jù)傳入的節(jié)點(diǎn)類型進(jìn)行掛載方法的判斷，如果首次掛載則為掛載component，之后是掛載element(patch方法會(huì)將vnode轉(zhuǎn)化為node節(jié)點(diǎn))

7、patch方法執(zhí)行內(nèi)部processComponent方法，最終執(zhí)行mountComponent方法，也就是Vue2中$mount最終執(zhí)行的方法

初始化流程

1、根組件的實(shí)例化：調(diào)用createComponentInstance

2、初始化根組件：調(diào)用setupComponent方法，也就是Vue2中的this.$_init方法，用來將選項(xiàng)進(jìn)行合并，并設(shè)置鉤子和響應(yīng)式

3、安裝render函數(shù)的副作用函數(shù)：setupRendererEffect

在Vue3中取消了watcher改為了副作用函數(shù)，副作用函數(shù)會(huì)在每次響應(yīng)式數(shù)據(jù)發(fā)生變化的時(shí)候重新執(zhí)行，內(nèi)部的render函數(shù)的執(zhí)行會(huì)觸發(fā)依賴收集，這樣當(dāng)響應(yīng)式數(shù)據(jù)變化時(shí)，響應(yīng)式組件就會(huì)更新。

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論