一. 前言

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

在讀后續(xù)文章時，請大家參考以下流程圖食用，好了廢話不多說，開整?。?！

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

二. Vue3 思路分析

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

1. createRender(options)

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

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

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

首先有這么幾點好處：

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

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

2. createApp

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

我們來看下app中常見的幾個api：

App

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

3. app.mount(‘#app’)

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

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

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

4. render(vnode, container)

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

patch(container._vnode|| null, vnode)

這樣，就形成了新舊vnode,也就有了diff的說法，讓我們進入到patch方法中。

5. patch(n1, n2, container)

patch中文意思打補丁，也就描述了他的用法，對比新舊vnode，也就是我們常說的diff算法，將新的vnode渲染到真實dom中。

該方法中主要分為了兩大分支，當然還有其它，我們就先忽略，跟著主線走下去

• 1.processComponent
• 當傳入的n2為組件時進入這個分支
• 2.processElement
• 當傳入的n2為元素類型時走該分支

我們先進入processComponent來對傳入的rootComponent進行處理

6. processComponent

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

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

我們接著往下看

7. mountComponent

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

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

8. setupRenderEffect

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

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

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

9. patch

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

10. processElement mountElement

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

patchElement
該方法也就是diff算法的核心，當組件更新之后，通過diff算法，將新的vnode渲染到頁面上。

三. 結(jié)尾

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

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

最新評論