包装函数用于提供更灵活接口而不会被流程所困扰11 createelement2-11创建元素.pdfVIP

createElement

createElement

Vue.js利用createElement方法创建VNode，它定义在src/core/vdom/create-

elemenet.js中：

//wrapperfunctionforprovidingamoreflexibleinterface

//withoutgettingyelledatbyflow

exportfunctioncreateElement(

context:Component,

tag:any,

data:any,

children:any,

normalizationType:any,

alwaysNormalize:boolean

):VNode|ArrayVNode{

if(Array.isArray(data)||isPrimitive(data)){

normalizationType=children

children=data

data=undefined

}

if(isTrue(alwaysNormalize)){

normalizationType=ALWAYS_NORMALIZE

}

return_createElement(context,tag,data,children,normalizationTyp

e)

}

createElement方法实际上是对_createElement方法的封装，它允许传入的参数更

加灵活，在处理这些参数后，调用真正创建VNode的函数_createElement：

exportfunction_createElement(

context:Component,

tag?:string|ClassComponent|Function|Object,

data?:VNodeData,

children?:any,

normalizationType?:number

):VNode|ArrayVNode{

if(isDef(data)isDef((data:any).__ob__)){

process.env.NODE_ENV!==productionwarn(

`Avoidusingobserveddataobjectasvnodedata:${JSON.stringify

(data)}\n`+

Alwayscreatefreshvnodedataobjectsineachrender!,

context

)

returncreateEmptyVNode()

}

//objectsyntaxinv-bind

if(isDef(data)isDef(data.is)){

tag=data.is

}

if(!tag){

//incaseofcomponent:issettofalsyvalue

returncreateEmptyVNode()

}

//warnagainstnon-primitivekey

if(process.env.NODE_ENV!==production

isDef(data)isDef(data.key)!isPrimitive(data.key)

){

if(!__WEEX__||!(@bindingindata.key)){

warn(

Avoidusingnon-primitivevalueaskey,+

usestring/numbervalueinstead.,

context

)

}

}

//supportsinglefunctionchildrenasdefaultscopedslot

if(Array.isArray(children)

typeofchildren[0]===function

){

data=data