vue 中Virtual Dom被創(chuàng)建的方法

Vue.prototype._render = function (): VNode {
 const vm: Component = this
 const { render, _parentVnode } = vm.$options
 // ... 
 // set parent vnode. this allows render functions to have access
 // to the data on the placeholder node.
 vm.$vnode = _parentVnode
 // render self
 let vnode
 try {
 vnode = render.call(vm._renderProxy, vm.$createElement)
 } catch (e) {
 handleError(e, vm, `render`)
 // return error render result,
 // or previous vnode to prevent render error causing blank component
 /* istanbul ignore else */
 if (process.env.NODE_ENV !== 'production' && vm.$options.renderError) {
 try {
 vnode = vm.$options.renderError.call(vm._renderProxy, vm.$createElement, e)
 } catch (e) {
 handleError(e, vm, `renderError`)
 vnode = vm._vnode
 }
 } else {
 vnode = vm._vnode
 }
 }
 // if the returned array contains only a single node, allow it
 if (Array.isArray(vnode) && vnode.length === 1) {
 vnode = vnode[0]
 }
 // return empty vnode in case the render function errored out
 if (!(vnode instanceof VNode)) {
 if (process.env.NODE_ENV !== 'production' && Array.isArray(vnode)) {
 warn(
 'Multiple root nodes returned from render function. Render function ' +
 'should return a single root node.',
 vm
 )
 }
 vnode = createEmptyVNode()
 }
 // set parent
 vnode.parent = _parentVnode
 return vnode
 }

/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
 initProxy(vm)
} else {
 vm._renderProxy = vm
}

let initProxy
// ...
initProxy = function initProxy (vm) {
 if (hasProxy) {
 // determine which proxy handler to use
 const options = vm.$options
 const handlers = options.render && options.render._withStripped
 ? getHandler
 : hasHandler
 vm._renderProxy = new Proxy(vm, handlers)
 } else {
 vm._renderProxy = vm
 }
}

const hasProxy =
 typeof Proxy !== 'undefined' && isNative(Proxy)

const hasHandler = {
 has (target, key) {
 const has = key in target
 const isAllowed = allowedGlobals(key) ||
 (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data))
 if (!has && !isAllowed) {
 if (key in target.$data) warnReservedPrefix(target, key)
 else warnNonPresent(target, key)
 }
 return has || !isAllowed
 }
}

const getHandler = {
 get (target, key) {
 if (typeof key === 'string' && !(key in target)) {
 if (key in target.$data) warnReservedPrefix(target, key)
 else warnNonPresent(target, key)
 }
 return target[key]
 }
}

export function initRender (vm: Component) {
 // ...
 // bind the createElement fn to this instance
 // so that we get proper render context inside it.
 // args order: tag, data, children, normalizationType, alwaysNormalize
 // internal version is used by render functions compiled from templates
 vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
 // normalization is always applied for the public version, used in
 // user-written render functions.
 vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
 // ...
}

const SIMPLE_NORMALIZE = 1
const ALWAYS_NORMALIZE = 2
// wrapper function for providing a more flexible interface
// without getting yelled at by flow
export function createElement (
 context: Component,
 tag: any,
 data: any,
 children: any,
 normalizationType: any,
 alwaysNormalize: boolean
): VNode | Array<VNode> {
 if (Array.isArray(data) || isPrimitive(data)) {
 normalizationType = children
 children = data
 data = undefined
 }
 if (isTrue(alwaysNormalize)) {
 normalizationType = ALWAYS_NORMALIZE
 }
 return _createElement(context, tag, data, children, normalizationType)
}

// @returns {VNode}
createElement(
 // {String | Object | Function}
 // 一個 HTML 標簽字符串，組件選項對象，或者
 // 解析上述任何一種的一個 async 異步函數(shù)。必需參數(shù)。
 'div',

 // {Object}
 // 一個包含模板相關屬性的數(shù)據(jù)對象
 // 你可以在 template 中使用這些特性?？蛇x參數(shù)。
 {
 },

 // {String | Array}
 // 子虛擬節(jié)點 (VNodes)，由 `createElement()` 構建而成，
 // 也可以使用字符串來生成“文本虛擬節(jié)點”。可選參數(shù)。
 [
 '先寫一些文字',
 createElement('h1', '一則頭條'),
 createElement(MyComponent, {
 props: {
 someProp: 'foobar'
 }
 })
 ]
)

if (Array.isArray(data) || isPrimitive(data)) {
 normalizationType = children
 children = data
 data = undefined
}

export function _createElement (
 context: Component,
 tag?: string | Class<Component> | Function | Object,
 data?: VNodeData,
 children?: any,
 normalizationType?: number
): VNode | Array<VNode> {
 // ...
 if (normalizationType === ALWAYS_NORMALIZE) {
 children = normalizeChildren(children)
 } else if (normalizationType === SIMPLE_NORMALIZE) {
 children = simpleNormalizeChildren(children)
 }
 let vnode, ns
 if (typeof tag === 'string') {
 let Ctor
 // ...
 if (config.isReservedTag(tag)) {
 // platform built-in elements
 vnode = new VNode(
 config.parsePlatformTagName(tag), data, children,
 undefined, undefined, context
 )
 } else if ((!data || !data.pre) && isDef(Ctor = resolveAsset(context.$options, 'components', tag))) {
 // component
 vnode = createComponent(Ctor, data, context, children, tag)
 } else {
 // unknown or unlisted namespaced elements
 // check at runtime because it may get assigned a namespace when its
 // parent normalizes children
 vnode = new VNode(
 tag, data, children,
 undefined, undefined, context
 )
 }
 } else {
 // direct component options / constructor
 vnode = createComponent(tag, data, context, children)
 }
 if (Array.isArray(vnode)) {
 return vnode
 } else if (isDef(vnode)) {
 if (isDef(ns)) applyNS(vnode, ns)
 if (isDef(data)) registerDeepBindings(data)
 return vnode
 } else {
 return createEmptyVNode()
 }
}

// 1. When the children contains components - because a functional component
// may return an Array instead of a single root. In this case, just a simple
// normalization is needed - if any child is an Array, we flatten the whole
// thing with Array.prototype.concat. It is guaranteed to be only 1-level deep
// because functional components already normalize their own children.
export function simpleNormalizeChildren (children: any) {
 for (let i = 0; i < children.length; i++) {
 if (Array.isArray(children[i])) {
 return Array.prototype.concat.apply([], children)
 }
 }
 return children
}

// 2. When the children contains constructs that always generated nested Arrays,
// e.g. <template>, <slot>, v-for, or when the children is provided by user
// with hand-written render functions / JSX. In such cases a full normalization
// is needed to cater to all possible types of children values.
export function normalizeChildren (children: any): ?Array<VNode> {
 return isPrimitive(children)
 ? [createTextVNode(children)]
 : Array.isArray(children)
 ? normalizeArrayChildren(children)
 : undefined
}

export default class VNode {
 tag: string | void;
 data: VNodeData | void;
 children: ?Array<VNode>;
 text: string | void;
 elm: Node | void;
 ns: string | void;
 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
 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
 devtoolsMeta: ?Object; // used to store functional render context for devtools
 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 // 當前節(jié)點數(shù)據(jù)
 this.children = children // 子節(jié)點
 this.text = text // 文本
 this.elm = elm // 對應的真實DOM節(jié)點
 this.ns = undefined // 命名空間
 this.context = context // 當前節(jié)點上下文
 this.fnContext = undefined // 函數(shù)化組件上下文
 this.fnOptions = undefined // 函數(shù)化組件配置參數(shù)
 this.fnScopeId = undefined // 函數(shù)化組件ScopeId
 this.key = data && data.key // 子節(jié)點key屬性
 this.componentOptions = componentOptions // 組件配置項 
 this.componentInstance = undefined // 組件實例
 this.parent = undefined // 父節(jié)點
 this.raw = false // 是否是原生的HTML片段或只是普通文本
 this.isStatic = false // 靜態(tài)節(jié)點標記
 this.isRootInsert = true // 是否作為根節(jié)點插入
 this.isComment = false // 是否為注釋節(jié)點
 this.isCloned = false // 是否為克隆節(jié)點
 this.isOnce = false // 是否有v-once指令
 this.asyncFactory = asyncFactory // 異步工廠方法 
 this.asyncMeta = undefined // 異步Meta
 this.isAsyncPlaceholder = false // 是否異步占位
 }

 // DEPRECATED: alias for componentInstance for backwards compat.
 /* istanbul ignore next */
 get child (): Component | void {
 return this.componentInstance
 }
}