$createElement 的定义又是这样:
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)需要注意的是这个是我们手写 render() 时调用的,如果是写 template 则会调用另一个 vm._c 方法。两者的区别在于 createElement() 最后的参数前者为 true,后者为 false。
而到这里,这个
createElement() 实质是调用了
_createElement() 方法,它的定义:
export function _createElement (
context: Component, // vm实例
tag?: string | Class<Component> | Function | Object, // DOM标签
data?: VNodeData, // vnode数据
children?: any,
normalizationType?: number
): VNode | Array<VNode> {
...
}现在,见到了我们平常使用的
createElement() 的 庐山真面目 。这里,我们并不看函数内部的执行逻辑,这里分析一下这五个参数:
context ,是
Vue 在
_render 阶段传入的当前实例
tag ,是我们使用
createElement 时定义的根节点
HTML 标签名
data ,是我们使用
createElement 是传入的该节点的属性,例如
class 、
style 、
props 等等
children ,是我们使用
createElement 是传入的该节点包含的子节点,通常是一个数组
normalizationType ,是用于判断拍平子节点数组时,要用简单迭代还是递归处理,前者是针对简单二维,后者是针对多维。可以看出,
createElement() 的设计,是针对一个节点,然后带
children 的组件的
VNode 的创建。并且,它并没有留给你进行多
root 的创建的机会,只能传一个根
root 的
tag ,其他都是它的选项。1.2 VNode
我想大家都知道
Vue2x










