Vue3中的執(zhí)行流程思路分析-流程圖
一. 前言
本文只在為大家梳理完整的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
操作完全解耦,這樣更適合多端操作,只需要重入對應的nodeOps
即可,自己重新封裝對應的dom
操作方法,比如移動端等
從流程圖來看,調(diào)用該方法之后,返回三個Api
,其中我們只關(guān)心兩個重要的也是常用的createApp、render
我們繼續(xù)往下看。
2. createApp
這個方法大家應該都不陌生,該方法傳入一個根組件rootComponent
,但是并沒有做任何處理,在該方法中主要任務創(chuàng)建了一個全局對象app
。
我們來看下app中常見的幾個api
:
App
use
: 用來注冊插件,為vue實現(xiàn)擴展,如vueRouter、vuex、pinia等component
: 用來注冊全局組件,可以在任意組件中使用- 注意:以上方法都應該在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í)行updateComponent
: 組件跟新時執(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)了真正的響應式處理,在setupComponent
中,執(zhí)行了setup
,在這我們對數(shù)據(jù)進行了響應式處理,利用reactive/refs
對數(shù)據(jù)實現(xiàn)了處理,在get
中收集依賴,set
中更新依賴。
在創(chuàng)建好componentUpdateFn
方法之后,我們創(chuàng)建了一個新的對象
new ReactiveEffect(componentUpdateFn)
,之后我們執(zhí)行返回對象的run
方法,其中執(zhí)行了傳入的componentUpdateFn
函數(shù),在componentUpdateFn
中,我們首先對組件的render
或者template
進行處理,也就對我們用到了響應式數(shù)據(jù)進行了get
,由此,將ReactiveEffect
收集到對應數(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ù),重復之前的步驟,重新執(zhí)行組件的render函數(shù)
獲取根標簽,傳遞給patch
,然后更新頁面,一直重復該過程。也就實現(xiàn)了頁面的改變。直到網(wǎng)頁關(guān)閉。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue2基本響應式實現(xiàn)方式之讓數(shù)組也變成響應式
這篇文章主要介紹了vue2基本響應式實現(xiàn)方式之讓數(shù)組也變成響應式問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04Vue.js?element-plus使用圖標不顯示問題的解決方式
近期在學習Vue時用elementUI時發(fā)現(xiàn)圖標在頁面上顯示不出來,所以這篇文章主要給大家介紹了關(guān)于Vue.js?element-plus使用圖標不顯示問題的解決方式,需要的朋友可以參考下2022-09-09解決vue admin element noCache設(shè)置無效的問題
今天小編就為大家分享一篇解決vue admin element noCache設(shè)置無效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11