一. 前言

本文只在為大家梳理完整的vue3代碼執(zhí)行流程，從創(chuàng)建createApp到渲染為真實(shí)dom節(jié)點(diǎn)。

在讀后續(xù)文章時(shí)，請(qǐng)大家參考以下流程圖食用，好了廢話(huà)不多說(shuō)，開(kāi)整?。。?/p>

（本文主要為梳理思路，不展示太多源碼。）

二. Vue3 思路分析

提示：一定要按照流程圖哦！??！

1. createRender(options)

我們創(chuàng)建vue3時(shí)，最常見(jiàn)的一個(gè)api就是createApp，但是在執(zhí)行createRender時(shí)，createApp還沒(méi)有被創(chuàng)建，那該方法是干什么的呢，傳入的參數(shù)有是什么呢？我們接著往下看。

options：源碼中也叫做 nodeOps,其實(shí)就是vue3自己重新封裝的一些dom操作，例如insert、remove、createElement等，在pc端，其實(shí)就是利用domcument下的一些原生方法實(shí)現(xiàn)

優(yōu)點(diǎn)：那就有人要問(wèn)了，為什么要重新封裝

首先有這么幾點(diǎn)好處：

• 1.封裝后使用更清楚簡(jiǎn)短，方便調(diào)用
• 2.最重要的一點(diǎn)，那就是將vue的渲染工作與dom操作完全解耦，這樣更適合多端操作，只需要重入對(duì)應(yīng)的nodeOps即可，自己重新封裝對(duì)應(yīng)的dom操作方法，比如移動(dòng)端等

從流程圖來(lái)看，調(diào)用該方法之后，返回三個(gè)Api,其中我們只關(guān)心兩個(gè)重要的也是常用的createApp、render
我們繼續(xù)往下看。

2. createApp

這個(gè)方法大家應(yīng)該都不陌生，該方法傳入一個(gè)根組件rootComponent，但是并沒(méi)有做任何處理，在該方法中主要任務(wù)創(chuàng)建了一個(gè)全局對(duì)象app。

我們來(lái)看下app中常見(jiàn)的幾個(gè)api：

App

• use: 用來(lái)注冊(cè)插件，為vue實(shí)現(xiàn)擴(kuò)展，如vueRouter、vuex、pinia等
• component: 用來(lái)注冊(cè)全局組件，可以在任意組件中使用
• 注意：以上方法都應(yīng)該在mount掛載之前執(zhí)行
• mount: 這一步也就是最關(guān)鍵的一部，開(kāi)始執(zhí)行將組件渲染的第一步，我們繼續(xù)往下看

3. app.mount(‘#app’)

從流程圖中我們可以看到，掛載中主要執(zhí)行了兩個(gè)操作

• 1.createVNode
• 首先將我們傳入的根組件傳入到createVNode方法中，將組件包裝成vnode對(duì)象并且返回
• 2.render(vnode, rootContainer)
• 此處的render就是在前邊執(zhí)行createRender時(shí)返回的方法，我們?cè)诖颂幚^續(xù)執(zhí)行它，并且傳入兩個(gè)參數(shù)，第一個(gè)是我們包裝后的rootComponent，第二個(gè)是掛載傳入真實(shí)domrootContainer

好了，mount執(zhí)行完畢，我們進(jìn)入到render中繼續(xù)向下執(zhí)行

4. render(vnode, container)

在此方法中，做了一個(gè)最重要的工作就是將已經(jīng)渲染的vnode，也可以稱(chēng)之為舊的vnode保存到container._vnode上，然后調(diào)用

patch(container._vnode|| null, vnode)

這樣，就形成了新舊vnode,也就有了diff的說(shuō)法，讓我們進(jìn)入到patch方法中。

5. patch(n1, n2, container)

patch中文意思打補(bǔ)丁，也就描述了他的用法，對(duì)比新舊vnode，也就是我們常說(shuō)的diff算法，將新的vnode渲染到真實(shí)dom中。

該方法中主要分為了兩大分支，當(dāng)然還有其它，我們就先忽略，跟著主線(xiàn)走下去

• 1.processComponent
• 當(dāng)傳入的n2為組件時(shí)進(jìn)入這個(gè)分支
• 2.processElement
• 當(dāng)傳入的n2為元素類(lèi)型時(shí)走該分支

我們先進(jìn)入processComponent來(lái)對(duì)傳入的rootComponent進(jìn)行處理

6. processComponent

該方法中又出現(xiàn)了兩個(gè)分支

• mountComponent: 在第一次掛載時(shí)執(zhí)行update
• Component: 組件跟新時(shí)執(zhí)行

我們接著往下看

7. mountComponent

該組件中執(zhí)行了三個(gè)主要的方法，我們一個(gè)個(gè)來(lái)看

• createInstance：首先是創(chuàng)建實(shí)例，我們自定義的每個(gè)組件第一次渲染時(shí)都會(huì)走該分支，為每個(gè)組件定義了一個(gè)組件實(shí)例instance，因此vue3中就有了一個(gè)方法getCurrentInstance來(lái)訪(fǎng)問(wèn)每個(gè)組件的實(shí)例。
• setupComponent：這一步非常重要，該方法接受一個(gè)參數(shù)，也就是剛剛創(chuàng)建的組件實(shí)例，在這一步中，調(diào)用了我們傳入的setup,所以，我們調(diào)用的所有方法，也就是在這被執(zhí)行，比如reactive,ref,生命hook,watch,computed等，之后將setup調(diào)用的結(jié)果保存到instance中的setupState屬性中。
• setupRenderEffect：在一切準(zhǔn)備工作都做完之后，接下來(lái)就該進(jìn)行渲染，我們繼續(xù)進(jìn)入到該方法中。

8. setupRenderEffect

該方法中創(chuàng)建了一個(gè)componentUpdateFn組件更新函數(shù)，也就是在這，實(shí)現(xiàn)了真正的響應(yīng)式處理，在setupComponent中，執(zhí)行了setup，在這我們對(duì)數(shù)據(jù)進(jìn)行了響應(yīng)式處理，利用reactive/refs對(duì)數(shù)據(jù)實(shí)現(xiàn)了處理，在get中收集依賴(lài)，set中更新依賴(lài)。

在創(chuàng)建好componentUpdateFn方法之后，我們創(chuàng)建了一個(gè)新的對(duì)象

new ReactiveEffect(componentUpdateFn)，之后我們執(zhí)行返回對(duì)象的run方法，其中執(zhí)行了傳入的componentUpdateFn函數(shù)，在componentUpdateFn中，我們首先對(duì)組件的render或者template進(jìn)行處理，也就對(duì)我們用到了響應(yīng)式數(shù)據(jù)進(jìn)行了get，由此，將ReactiveEffect收集到對(duì)應(yīng)數(shù)據(jù)的依賴(lài)中，在每次數(shù)據(jù)修改時(shí)，執(zhí)行componentUpdateFn，之后，在掛載函數(shù)中繼續(xù)執(zhí)行patch，傳入處理后的render或者temeplate，至此回到patch中，進(jìn)行遞歸。

9. patch

此時(shí)，傳入的是根標(biāo)簽包裝后的vnode，所以，此次走的分支為processElement，讓我們跟著流程圖繼續(xù)往下看。

10. processElement mountElement

在該方法中，我們利用我們傳入的nodeOpts，也就是dom操作方法，將vnode渲染為真實(shí)的dom，此時(shí)，終于將組件渲染到頁(yè)面上，同時(shí)將轉(zhuǎn)換的真實(shí)dom存放在vnode.el上。

patchElement
該方法也就是diff算法的核心，當(dāng)組件更新之后，通過(guò)diff算法，將新的vnode渲染到頁(yè)面上。

三. 結(jié)尾

至此，vue3從創(chuàng)建到渲染的所有流程執(zhí)行結(jié)束，在數(shù)據(jù)更新之后，我們通過(guò)執(zhí)行依賴(lài)，也就是componentUpdateFn函數(shù)，重復(fù)之前的步驟，重新執(zhí)行組件的render函數(shù)獲取根標(biāo)簽，傳遞給patch，然后更新頁(yè)面，一直重復(fù)該過(guò)程。也就實(shí)現(xiàn)了頁(yè)面的改變。直到網(wǎng)頁(yè)關(guān)閉。

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

最新評(píng)論