Vue 中 template 有且只能一个 root的原因解析(源码分析)

2020-06-16 06:58:15易采站长站整理

$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