Vue中为何template必须只有一个root元素？源码解析揭示奥秘。

本文共计3599个文字，预计阅读时间需要15分钟。

引言+今年，疫情+并没有影响到+各种面经+的+正常出现，可以说是持续不断（学不动...）。然而，在前段时间也看到一个关于Vue的问题，为什么每个组件的template中只能有一个r？

引言

今年， 疫情 并没有影响到各种面经的正常出现，可谓是络绎不绝（学不动...）。然后，在前段时间也看到一个这样的关于 Vue 的问题， 为什么每个组件 template 中有且只能一个 root？

可能，大家在平常开发中，用的较多就是 template 写 html 的形式。当然，不排除用 JSX 和 render() 函数的。但是，究其本质，它们最终都会转化成 render() 函数。然后，再由 render() 函数转为 Vritual DOM （以下统称 VNode ）。而 render() 函数转为 VNode 的过程，是由 createElement() 函数完成的。

因此，本次文章将会先讲述 Vue 为什么限制 template 有且只能一个 root 。然后，再分析 Vue 如何规避出现多 root 的情况。