如何在Vue中實(shí)現(xiàn)虛擬節(jié)點(diǎn)

本篇文章給大家分享的是有關(guān)如何在Vue中實(shí)現(xiàn)虛擬節(jié)點(diǎn)，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

VNode 類(lèi)

VNode 類(lèi)的實(shí)現(xiàn)是支持頁(yè)面渲染的基礎(chǔ)，這個(gè)類(lèi)的實(shí)現(xiàn)并不復(fù)雜，但無(wú)論是創(chuàng)建Vue組件實(shí)例還是使用動(dòng)態(tài)JS擴(kuò)展函數(shù)組件都運(yùn)用到了渲染函數(shù) render ，它充分利用了 VNode 來(lái)構(gòu)建虛擬DOM樹(shù)。

// 定義并導(dǎo)出VNode類(lèi)
export default class VNode {
 // 定義實(shí)例屬性
 tag: string | void; // 標(biāo)簽名稱(chēng)
 data: VNodeData | void; // 節(jié)點(diǎn)數(shù)據(jù)
 children: ?Array<VNode>; // 子虛擬節(jié)點(diǎn)列表
 text: string | void; // 節(jié)點(diǎn)文字
 elm: Node | void; // 對(duì)應(yīng)DOM節(jié)點(diǎn)
 ns: string | void; // 節(jié)點(diǎn)命名空間，針對(duì)svg標(biāo)簽的屬性
 context: Component | void; // rendered in this component's scope // 組件上下文
 key: string | number | void; // 節(jié)點(diǎn)唯一鍵
 componentOptions: VNodeComponentOptions | void; // 虛擬節(jié)點(diǎn)組件配置對(duì)象
 componentInstance: Component | void; // component instance // 組件實(shí)例
 parent: VNode | void; // component placeholder node // 組件占位符節(jié)點(diǎn)

 // 嚴(yán)格內(nèi)部屬性，有些屬性是服務(wù)器渲染的情況使用的，暫時(shí)還不了解
 // strictly internal
 // 是否包含原始HTML。只有服務(wù)器端會(huì)使用
 raw: boolean; // contains raw HTML? (server only) 
 // 是否靜態(tài)節(jié)點(diǎn)，靜態(tài)節(jié)點(diǎn)將會(huì)被提升
 isStatic: boolean; // hoisted static node 
 // 是否在根節(jié)點(diǎn)插入，進(jìn)入轉(zhuǎn)換檢查所必需的
 isRootInsert: boolean; // necessary for enter transition check
 // 是否空注釋占位符
 isComment: boolean; // empty comment placeholder?
 // 是否拷貝節(jié)點(diǎn)
 isCloned: boolean; // is a cloned node?
 // 是否一次性節(jié)點(diǎn)
 isOnce: boolean; // is a v-once node?
 // 異步組件工廠方法
 asyncFactory: Function | void; // async component factory function
 // 異步源
 asyncMeta: Object | void;
 // 是否異步占位符
 isAsyncPlaceholder: boolean;
 // 服務(wù)器端上下文
 ssrContext: Object | void;
 // 功能節(jié)點(diǎn)的實(shí)際實(shí)例上下文
 fnContext: Component | void; // real context vm for functional nodes
 // 方法配置選項(xiàng)，只在服務(wù)器渲染使用
 fnOptions: ?ComponentOptions; // for SSR caching
 // 方法作用域id
 fnScopeId: ?string; // functional scope id support

 // 構(gòu)造函數(shù)，參數(shù)均可選，與上面定義對(duì)應(yīng)
 constructor (
  tag?: string,
  data?: VNodeData,
  children?: ?Array<VNode>,
  text?: string,
  elm?: Node,
  context?: Component,
  componentOptions?: VNodeComponentOptions,
  asyncFactory?: Function
 ) {
  // 實(shí)例初始化賦值
  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
 }
}

// 定義并導(dǎo)出createEmptyVNode函數(shù)，創(chuàng)建空虛擬節(jié)點(diǎn)
export const createEmptyVNode = (text: string = '') => {
 // 實(shí)例化虛擬節(jié)點(diǎn)
 const node = new VNode()
 // 設(shè)置節(jié)點(diǎn)文字為空，并設(shè)置為注釋節(jié)點(diǎn)
 node.text = text
 node.isComment = true
 // 返回節(jié)點(diǎn)
 return node
}

// 定義并導(dǎo)出createTextVNode函數(shù)，創(chuàng)建文字虛擬節(jié)點(diǎn)
export function createTextVNode (val: string | number) {
 // 置空實(shí)例初始化的標(biāo)簽名，數(shù)據(jù)，子節(jié)點(diǎn)屬性，只傳入文字
 return new VNode(undefined, undefined, undefined, String(val))
}

// 優(yōu)化淺拷貝
// 用于靜態(tài)節(jié)點(diǎn)和插槽節(jié)點(diǎn)，因?yàn)樗鼈兛梢栽诙鄠€(gè)渲染中重用，
// 當(dāng)DOM操作依賴(lài)于它們的elm引用時(shí)，克隆它們可以避免錯(cuò)誤
// 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.
// 定義并導(dǎo)出cloneVNode函數(shù)，拷貝節(jié)點(diǎn)
export function cloneVNode (vnode: VNode): VNode {
 // 拷貝節(jié)點(diǎn)并返回
 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 類(lèi)實(shí)現(xiàn)的源代碼分兩部分，第一部分是定義 VNode 類(lèi)自身的實(shí)現(xiàn)，第二部分是定一些常用的節(jié)點(diǎn)創(chuàng)建方法，包括創(chuàng)建空的虛擬節(jié)點(diǎn)，文字虛擬節(jié)點(diǎn)和新拷貝節(jié)點(diǎn)。虛擬節(jié)點(diǎn)本身是一個(gè)包含了所有渲染所需信息的載體，從前面一部分的屬性就可以看出，不僅有相應(yīng)的 DOM 標(biāo)簽和屬性信息，還包含了子虛擬節(jié)點(diǎn)列表，所以一個(gè)組件初始化之后得到的 VNode 也是一棵虛擬節(jié)點(diǎn)樹(shù)，實(shí)質(zhì)是抽象和信息化了的對(duì)應(yīng)于 DOM 樹(shù)的 JS 對(duì)象。

VNode 的使用在服務(wù)器渲染中也有應(yīng)用，關(guān)于這一部分暫時(shí)放到之后去研究。

認(rèn)識(shí)到 VNode 的實(shí)質(zhì)之后，對(duì)于它的基礎(chǔ)性的作用還是不太清楚，為什么需要?jiǎng)?chuàng)建這種對(duì)象來(lái)呢？答案就在Vue的響應(yīng)式刷新里。如前所述，觀察系統(tǒng)實(shí)現(xiàn)了對(duì)數(shù)據(jù)變更的監(jiān)視，在收到變更的通知之后處理權(quán)就移交到渲染系統(tǒng)手上，渲染系統(tǒng)首先進(jìn)行的處理就是根據(jù)變動(dòng)生成新虛擬節(jié)點(diǎn)樹(shù)，然后再去對(duì)比舊的虛擬節(jié)點(diǎn)樹(shù)，來(lái)實(shí)現(xiàn)這個(gè)抽象對(duì)象的更新，簡(jiǎn)單的來(lái)說(shuō)就是通過(guò)新舊兩個(gè)節(jié)點(diǎn)樹(shù)的對(duì)照，來(lái)最終確定一個(gè)真實(shí)DOM建立起來(lái)所需要依賴(lài)的抽象對(duì)象，只要這個(gè)真實(shí) DOM 所依賴(lài)的對(duì)象確定好，渲染函數(shù)會(huì)把它轉(zhuǎn)化成真實(shí)的 DOM 樹(shù)。

最后來(lái)概括地描述一下 VNode 渲染成真實(shí) DOM 的路徑：

渲染路徑

Vue 的一般渲染有兩條路徑：

• 組件實(shí)例初始創(chuàng)建生成DOM

• 組件數(shù)據(jù)更新刷新DOM

在研究生命周期的時(shí)候知道，有 mount 和 update 兩個(gè)鉤子函數(shù)，這兩個(gè)生命周期的過(guò)程分別代表了兩條渲染路徑的執(zhí)行。

組件實(shí)例初始創(chuàng)建生成DOM

Vue 組件實(shí)例初始創(chuàng)建時(shí)，走的是 mount 這條路徑，在這條路徑上初始沒(méi)有已暫存的舊虛擬節(jié)點(diǎn)，要經(jīng)歷第一輪 VNode 的生成。這一段代碼的執(zhí)行是從 $mount 函數(shù)開(kāi)始的：

$mount => mountComponent => updateComponent => _render => _update => createPatchFunction(patch) => createElm => insert => removeVnodes

大致描述一下每一個(gè)流程中所進(jìn)行的關(guān)于節(jié)點(diǎn)的處理：

• mountComponent 接收了掛載的真實(shí)DOM節(jié)點(diǎn)，然后賦值給 vm.$el

• updateComponent 調(diào)用 _update ，并傳入 _render 生成的新節(jié)點(diǎn)

• _render 生成新虛擬節(jié)點(diǎn)樹(shù)，它內(nèi)部是調(diào)用實(shí)例的 createElement 方法創(chuàng)建虛擬節(jié)點(diǎn)

• _update 方法接收到新的虛擬節(jié)點(diǎn)后，會(huì)根據(jù)是否已有存儲(chǔ)的舊虛擬節(jié)點(diǎn)來(lái)分離執(zhí)行路徑，就這一個(gè)路徑來(lái)說(shuō)，初始儲(chǔ)存的 VNode 是不存在的，接下來(lái)執(zhí)行 patch 操作會(huì)傳入掛載的真實(shí)DOM節(jié)點(diǎn)和新生成的虛擬節(jié)點(diǎn)。

• createPatchFunction 即是 patch 方法調(diào)用的實(shí)際函數(shù)，執(zhí)行時(shí)會(huì)將傳入的真實(shí)DOM節(jié)點(diǎn)轉(zhuǎn)換成虛擬節(jié)點(diǎn)，然后執(zhí)行 createElm

• createElm 會(huì)根據(jù)新的虛擬節(jié)點(diǎn)生成真實(shí)DOM節(jié)點(diǎn)，內(nèi)部同樣調(diào)用 createElement 方法來(lái)創(chuàng)建節(jié)點(diǎn)。

• insert 方法將生成的真實(shí)DOM插入到DOM樹(shù)中

• removeVnodes 最后將之前轉(zhuǎn)換的真實(shí)DOM節(jié)點(diǎn)從DOM樹(shù)中移除

以上就是一般初始化Vue實(shí)例組件時(shí)渲染的路徑，在這個(gè)過(guò)程中，初始 VNode 雖然不存在，但是由于掛在的真實(shí) DOM 節(jié)點(diǎn)一定存在，所以代碼會(huì)按照這樣的流程來(lái)執(zhí)行。

組件數(shù)據(jù)更新刷新DOM

一般情況下，數(shù)據(jù)變成會(huì)通知 Watcher 實(shí)例調(diào)用 update 方法，這個(gè)方法在一般情況下會(huì)把待渲染的數(shù)據(jù)觀察對(duì)象加入到事件任務(wù)隊(duì)列中，避免開(kāi)銷(xiāo)過(guò)高在一次處理中集中執(zhí)行。所以在 mount 路徑已經(jīng)完成了之后，生命周期運(yùn)行期間都是走的 update 路徑，在每一次的事件處理中 nextTick 會(huì)調(diào)用 flushSchedulerQueue 來(lái)開(kāi)始一輪頁(yè)面刷新：

flushSchedulerQueue => watcher.run => watcher.getAndInvoke => watcher.get => updateComponent => _render => _update => createPatchFunction(patch) => patchVnode => updateChildren

在這個(gè)流程中各個(gè)方法的大致處理如下：

1. flushSchedulerQueue 調(diào)用每一個(gè)變更了的數(shù)據(jù)的監(jiān)視器的 run 方法

2. run 執(zhí)行調(diào)用實(shí)例的 getAndInvoke 方法，目的是獲取新數(shù)據(jù)并調(diào)用監(jiān)視器的回調(diào)函數(shù)

3. getAndInvoke 執(zhí)行的第一步是要獲取變更后的新數(shù)據(jù)，在這時(shí)會(huì)調(diào)用取值器函數(shù)

4. get 執(zhí)行的取值器函數(shù)getter被設(shè)定為 updateComponent ，所以會(huì)執(zhí)行繼續(xù)執(zhí)行它

5. updateComponent => createPatchFunction 之間的流程與另一條路徑相同，只是其中基于新舊虛擬節(jié)點(diǎn)的判斷不一樣，如果存在舊虛擬節(jié)點(diǎn)就執(zhí)行 patchVnode 操作。

6. patchVnode 方法是實(shí)際更新節(jié)點(diǎn)的實(shí)現(xiàn)，在這個(gè)函數(shù)的執(zhí)行中，會(huì)得到最終的真實(shí)DOM

生命周期中的渲染主要是以上兩條路徑，調(diào)用的入口不同，但中間有一部分邏輯是公用的，再根據(jù)判斷來(lái)選擇分離的路程來(lái)更新 VNode 和刷新節(jié)點(diǎn)。在這個(gè)過(guò)程可以看出 VNode 的重要作用。

雖然路徑大致可以這樣總結(jié)，但其中的實(shí)現(xiàn)比較復(fù)雜。不僅在流程判斷上非常有跳躍性，實(shí)現(xiàn)更新真實(shí)節(jié)點(diǎn)樹(shù)的操作也都是復(fù)雜遞歸的調(diào)用。

以上就是如何在Vue中實(shí)現(xiàn)虛擬節(jié)點(diǎn)，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。