Vue源碼探究之虛擬節(jié)點的實現(xiàn)
頁面初始化的所有狀態(tài)都準備就緒之后,下一步就是要生成組件相應的虛擬節(jié)點—— VNode 。初次進行組件初始化的時候, VNode 也會執(zhí)行一次初始化并存儲這時創(chuàng)建好的虛擬節(jié)點對象。在隨后的生命周期中,組件內的數(shù)據發(fā)生變動時,會先生成新的 VNode 對象,然后再根據與之前存儲的舊虛擬節(jié)點的對比來執(zhí)行刷新頁面 DOM 的操作。頁面刷新的流程大致上可以這樣簡單的總結,但是其實現(xiàn)路程是非常復雜的,為了深入地了解虛擬節(jié)點生成和更新的過程,首先來看看 VNode 類的具體實現(xiàn)。
VNode 類
VNode 類的實現(xiàn)是支持頁面渲染的基礎,這個類的實現(xiàn)并不復雜,但無論是創(chuàng)建Vue組件實例還是使用動態(tài)JS擴展函數(shù)組件都運用到了渲染函數(shù) render ,它充分利用了 VNode 來構建虛擬DOM樹。
// 定義并導出VNode類
export default class VNode {
// 定義實例屬性
tag: string | void; // 標簽名稱
data: VNodeData | void; // 節(jié)點數(shù)據
children: ?Array<VNode>; // 子虛擬節(jié)點列表
text: string | void; // 節(jié)點文字
elm: Node | void; // 對應DOM節(jié)點
ns: string | void; // 節(jié)點命名空間,針對svg標簽的屬性
context: Component | void; // rendered in this component's scope // 組件上下文
key: string | number | void; // 節(jié)點唯一鍵
componentOptions: VNodeComponentOptions | void; // 虛擬節(jié)點組件配置對象
componentInstance: Component | void; // component instance // 組件實例
parent: VNode | void; // component placeholder node // 組件占位符節(jié)點
// 嚴格內部屬性,有些屬性是服務器渲染的情況使用的,暫時還不了解
// strictly internal
// 是否包含原始HTML。只有服務器端會使用
raw: boolean; // contains raw HTML? (server only)
// 是否靜態(tài)節(jié)點,靜態(tài)節(jié)點將會被提升
isStatic: boolean; // hoisted static node
// 是否在根節(jié)點插入,進入轉換檢查所必需的
isRootInsert: boolean; // necessary for enter transition check
// 是否空注釋占位符
isComment: boolean; // empty comment placeholder?
// 是否拷貝節(jié)點
isCloned: boolean; // is a cloned node?
// 是否一次性節(jié)點
isOnce: boolean; // is a v-once node?
// 異步組件工廠方法
asyncFactory: Function | void; // async component factory function
// 異步源
asyncMeta: Object | void;
// 是否異步占位符
isAsyncPlaceholder: boolean;
// 服務器端上下文
ssrContext: Object | void;
// 功能節(jié)點的實際實例上下文
fnContext: Component | void; // real context vm for functional nodes
// 方法配置選項,只在服務器渲染使用
fnOptions: ?ComponentOptions; // for SSR caching
// 方法作用域id
fnScopeId: ?string; // functional scope id support
// 構造函數(shù),參數(shù)均可選,與上面定義對應
constructor (
tag?: string,
data?: VNodeData,
children?: ?Array<VNode>,
text?: string,
elm?: Node,
context?: Component,
componentOptions?: VNodeComponentOptions,
asyncFactory?: Function
) {
// 實例初始化賦值
this.tag = tag
this.data = data
this.children = children
this.text = text
this.elm = elm
this.ns = undefined
this.context = context
this.fnContext = undefined
this.fnOptions = undefined
this.fnScopeId = undefined
this.key = data && data.key
this.componentOptions = componentOptions
this.componentInstance = undefined
this.parent = undefined
this.raw = false
this.isStatic = false
this.isRootInsert = true
this.isComment = false
this.isCloned = false
this.isOnce = false
this.asyncFactory = asyncFactory
this.asyncMeta = undefined
this.isAsyncPlaceholder = false
}
// 定義child屬性的取值器
// 已棄用:用于向后compat的componentInstance的別名
// DEPRECATED: alias for componentInstance for backwards compat.
/* istanbul ignore next */
get child (): Component | void {
return this.componentInstance
}
}
// 定義并導出createEmptyVNode函數(shù),創(chuàng)建空虛擬節(jié)點
export const createEmptyVNode = (text: string = '') => {
// 實例化虛擬節(jié)點
const node = new VNode()
// 設置節(jié)點文字為空,并設置為注釋節(jié)點
node.text = text
node.isComment = true
// 返回節(jié)點
return node
}
// 定義并導出createTextVNode函數(shù),創(chuàng)建文字虛擬節(jié)點
export function createTextVNode (val: string | number) {
// 置空實例初始化的標簽名,數(shù)據,子節(jié)點屬性,只傳入文字
return new VNode(undefined, undefined, undefined, String(val))
}
// 優(yōu)化淺拷貝
// 用于靜態(tài)節(jié)點和插槽節(jié)點,因為它們可以在多個渲染中重用,
// 當DOM操作依賴于它們的elm引用時,克隆它們可以避免錯誤
// optimized shallow clone
// used for static nodes and slot nodes because they may be reused across
// multiple renders, cloning them avoids errors when DOM manipulations rely
// on their elm reference.
// 定義并導出cloneVNode函數(shù),拷貝節(jié)點
export function cloneVNode (vnode: VNode): VNode {
// 拷貝節(jié)點并返回
const cloned = new VNode(
vnode.tag,
vnode.data,
vnode.children,
vnode.text,
vnode.elm,
vnode.context,
vnode.componentOptions,
vnode.asyncFactory
)
cloned.ns = vnode.ns
cloned.isStatic = vnode.isStatic
cloned.key = vnode.key
cloned.isComment = vnode.isComment
cloned.fnContext = vnode.fnContext
cloned.fnOptions = vnode.fnOptions
cloned.fnScopeId = vnode.fnScopeId
cloned.asyncMeta = vnode.asyncMeta
cloned.isCloned = true
return cloned
}
VNode 類實現(xiàn)的源代碼分兩部分,第一部分是定義 VNode 類自身的實現(xiàn),第二部分是定一些常用的節(jié)點創(chuàng)建方法,包括創(chuàng)建空的虛擬節(jié)點,文字虛擬節(jié)點和新拷貝節(jié)點。虛擬節(jié)點本身是一個包含了所有渲染所需信息的載體,從前面一部分的屬性就可以看出,不僅有相應的 DOM 標簽和屬性信息,還包含了子虛擬節(jié)點列表,所以一個組件初始化之后得到的 VNode 也是一棵虛擬節(jié)點樹,實質是抽象和信息化了的對應于 DOM 樹的 JS 對象。
VNode 的使用在服務器渲染中也有應用,關于這一部分暫時放到之后去研究。
認識到 VNode 的實質之后,對于它的基礎性的作用還是不太清楚,為什么需要創(chuàng)建這種對象來呢?答案就在Vue的響應式刷新里。如前所述,觀察系統(tǒng)實現(xiàn)了對數(shù)據變更的監(jiān)視,在收到變更的通知之后處理權就移交到渲染系統(tǒng)手上,渲染系統(tǒng)首先進行的處理就是根據變動生成新虛擬節(jié)點樹,然后再去對比舊的虛擬節(jié)點樹,來實現(xiàn)這個抽象對象的更新,簡單的來說就是通過新舊兩個節(jié)點樹的對照,來最終確定一個真實DOM建立起來所需要依賴的抽象對象,只要這個真實 DOM 所依賴的對象確定好,渲染函數(shù)會把它轉化成真實的 DOM 樹。
最后來概括地描述一下 VNode 渲染成真實 DOM 的路徑:
渲染路徑
Vue 的一般渲染有兩條路徑:
- 組件實例初始創(chuàng)建生成DOM
- 組件數(shù)據更新刷新DOM
在研究生命周期的時候知道,有 mount 和 update 兩個鉤子函數(shù),這兩個生命周期的過程分別代表了兩條渲染路徑的執(zhí)行。
組件實例初始創(chuàng)建生成DOM
Vue 組件實例初始創(chuàng)建時,走的是 mount 這條路徑,在這條路徑上初始沒有已暫存的舊虛擬節(jié)點,要經歷第一輪 VNode 的生成。這一段代碼的執(zhí)行是從 $mount 函數(shù)開始的:
$mount => mountComponent => updateComponent => _render => _update => createPatchFunction(patch) => createElm => insert => removeVnodes
大致描述一下每一個流程中所進行的關于節(jié)點的處理:
- mountComponent 接收了掛載的真實DOM節(jié)點,然后賦值給 vm.$el
- updateComponent 調用 _update ,并傳入 _render 生成的新節(jié)點
- _render 生成新虛擬節(jié)點樹,它內部是調用實例的 createElement 方法創(chuàng)建虛擬節(jié)點
- _update 方法接收到新的虛擬節(jié)點后,會根據是否已有存儲的舊虛擬節(jié)點來分離執(zhí)行路徑,就這一個路徑來說,初始儲存的 VNode 是不存在的,接下來執(zhí)行 patch 操作會傳入掛載的真實DOM節(jié)點和新生成的虛擬節(jié)點。
- createPatchFunction 即是 patch 方法調用的實際函數(shù),執(zhí)行時會將傳入的真實DOM節(jié)點轉換成虛擬節(jié)點,然后執(zhí)行 createElm
- createElm 會根據新的虛擬節(jié)點生成真實DOM節(jié)點,內部同樣調用 createElement 方法來創(chuàng)建節(jié)點。
- insert 方法將生成的真實DOM插入到DOM樹中
- removeVnodes 最后將之前轉換的真實DOM節(jié)點從DOM樹中移除
以上就是一般初始化Vue實例組件時渲染的路徑,在這個過程中,初始 VNode 雖然不存在,但是由于掛在的真實 DOM 節(jié)點一定存在,所以代碼會按照這樣的流程來執(zhí)行。
組件數(shù)據更新刷新DOM
一般情況下,數(shù)據變成會通知 Watcher 實例調用 update 方法,這個方法在一般情況下會把待渲染的數(shù)據觀察對象加入到事件任務隊列中,避免開銷過高在一次處理中集中執(zhí)行。所以在 mount 路徑已經完成了之后,生命周期運行期間都是走的 update 路徑,在每一次的事件處理中 nextTick 會調用 flushSchedulerQueue 來開始一輪頁面刷新:
flushSchedulerQueue => watcher.run => watcher.getAndInvoke => watcher.get => updateComponent => _render => _update => createPatchFunction(patch) => patchVnode => updateChildren
在這個流程中各個方法的大致處理如下:
- flushSchedulerQueue 調用每一個變更了的數(shù)據的監(jiān)視器的 run 方法
- run 執(zhí)行調用實例的 getAndInvoke 方法,目的是獲取新數(shù)據并調用監(jiān)視器的回調函數(shù)
- getAndInvoke 執(zhí)行的第一步是要獲取變更后的新數(shù)據,在這時會調用取值器函數(shù)
- get 執(zhí)行的取值器函數(shù)getter被設定為 updateComponent ,所以會執(zhí)行繼續(xù)執(zhí)行它
- updateComponent => createPatchFunction 之間的流程與另一條路徑相同,只是其中基于新舊虛擬節(jié)點的判斷不一樣,如果存在舊虛擬節(jié)點就執(zhí)行 patchVnode 操作。
- patchVnode 方法是實際更新節(jié)點的實現(xiàn),在這個函數(shù)的執(zhí)行中,會得到最終的真實DOM
生命周期中的渲染主要是以上兩條路徑,調用的入口不同,但中間有一部分邏輯是公用的,再根據判斷來選擇分離的路程來更新 VNode 和刷新節(jié)點。在這個過程可以看出 VNode 的重要作用。
雖然路徑大致可以這樣總結,但其中的實現(xiàn)比較復雜。不僅在流程判斷上非常有跳躍性,實現(xiàn)更新真實節(jié)點樹的操作也都是復雜遞歸的調用。
總的來說虛擬節(jié)點的實現(xiàn)是非常平易近人,但是在節(jié)點渲染的過程中卻被運用的十分復雜,段位不夠高看了很多遍測試了很多遍才弄清楚整個執(zhí)行流,這之外還有關于服務器端渲染和持久活躍組件的部分暫時都忽略了。不過關于節(jié)點渲染這一部分的實現(xiàn)邏輯非常值得去好好研究。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
詳解如何在Vue3+TS的項目中使用NProgress進度條
本文主要介紹了詳解如何在Vue3+TS的項目中使用NProgress進度條,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
在vue和element-ui的table中實現(xiàn)分頁復選功能
這篇文章主要介紹了在vue和element-ui的table中實現(xiàn)分頁復選功能,本文代碼結合圖文的形式給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12

