頁(yè)面初始化的所有狀態(tài)都準(zhǔn)備就緒之后，下一步就是要生成組件相應(yīng)的虛擬節(jié)點(diǎn)—— VNode 。初次進(jìn)行組件初始化的時(shí)候， VNode 也會(huì)執(zhí)行一次初始化并存儲(chǔ)這時(shí)創(chuàng)建好的虛擬節(jié)點(diǎn)對(duì)象。在隨后的生命周期中，組件內(nèi)的數(shù)據(jù)發(fā)生變動(dòng)時(shí)，會(huì)先生成新的 VNode 對(duì)象，然后再根據(jù)與之前存儲(chǔ)的舊虛擬節(jié)點(diǎn)的對(duì)比來(lái)執(zhí)行刷新頁(yè)面 DOM 的操作。頁(yè)面刷新的流程大致上可以這樣簡(jiǎn)單的總結(jié)，但是其實(shí)現(xiàn)路程是非常復(fù)雜的，為了深入地了解虛擬節(jié)點(diǎn)生成和更新的過(guò)程，首先來(lái)看看 VNode 類(lèi)的具體實(shí)現(xiàn)。

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? // 異步組件工廠(chǎng)方法 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}