Vue源碼探究之虛擬節點的實現

// 定義并導出VNode類
export default class VNode {
 // 定義實例屬性
 tag: string | void; // 標簽名稱
 data: VNodeData | void; // 節點數據
 children: ?Array<VNode>; // 子虛擬節點列表
 text: string | void; // 節點文字
 elm: Node | void; // 對應DOM節點
 ns: string | void; // 節點命名空間，針對svg標簽的屬性
 context: Component | void; // rendered in this component's scope // 組件上下文
 key: string | number | void; // 節點唯一鍵
 componentOptions: VNodeComponentOptions | void; // 虛擬節點組件配置對象
 componentInstance: Component | void; // component instance // 組件實例
 parent: VNode | void; // component placeholder node // 組件占位符節點

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

 // 構造函數，參數均可選，與上面定義對應
 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函數，創建空虛擬節點
export const createEmptyVNode = (text: string = '') => {
 // 實例化虛擬節點
 const node = new VNode()
 // 設置節點文字為空，并設置為注釋節點
 node.text = text
 node.isComment = true
 // 返回節點
 return node
}

// 定義并導出createTextVNode函數，創建文字虛擬節點
export function createTextVNode (val: string | number) {
 // 置空實例初始化的標簽名，數據，子節點屬性，只傳入文字
 return new VNode(undefined, undefined, undefined, String(val))
}

// 優化淺拷貝
// 用于靜態節點和插槽節點，因為它們可以在多個渲染中重用，
// 當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函數，拷貝節點
export function cloneVNode (vnode: VNode): VNode {
 // 拷貝節點并返回
 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
}