引言
今年， 疫情 并没有影响到各种面经的正常出现，可谓是络绎不绝（学不动…）。然后，在前段时间也看到一个这样的关于
Vue 的问题， 为什么每个组件 template 中有且只能一个 root？可能，大家在平常开发中，用的较多就是
template 写
html 的形式。当然，不排除用
JSX 和
render() 函数的。但是，究其本质，它们最终都会转化成
render() 函数。然后，再由
render() 函数转为
Vritual DOM （以下统称
VNode ）。而
render() 函数转为
VNode 的过程，是由
createElement() 函数完成的。因此，本次文章将会先讲述
Vue 为什么限制
template 有且只能一个
root 。然后，再分析
Vue 如何规避出现多
root 的情况。那么，接下来我们就从源码的角度去深究一下这个过程！一、为什么限制 template 有且只能有一个 root
这里，我们会分两个方面讲解，一方面是
createElement() 的执行过程和定义，另一方面是
VNode 的定义。1.1 createElement()
createElement() 函数在源码中，被设计为
render() 函数的参数。所以 官方文档 也讲解了，如何使用
render() 函数的方式创建组件。而
createElement() 会在
_render 阶段执行：
...
const { render, _parentVnode } = vm.$options
...
vnode = render.call(vm._renderProxy, vm.$createElement);可以很简单地看出，源码中通过
call() 将当前实例作为
context 上下文以及
$createElement 作为参数传入。Vue2x 源码中用了大量的 call 和 apply，例如经典的 $set() API 实现数组变化的响应式处理就用的很是精妙，大家有兴趣可以看看。
