vue散记：根template只能有一个子元素

前言

  之前使用过别人写的vue+element项目，在别人搭建好的框架下修修改改、缝缝补补，感觉还行，整体流程还能走的通，但是不能总是用别人搭建好的框架啊。于是就想着自己也用vue-cli搭建一套，搭建的过程中也遇到了些问题，有些不理解的，就记下来，因为比较散，就写个散记系列吧。

根template只能有一个子元素

1.现象

每个组件文件中的根template，也就是最外层的template只能有一个子元素。非根template没有限制，可以有多个。以下的template均指的是根template，不要混淆了。
当template有多个子元素时，报错，如下

意思是说，每个template根元素只能有一个元素。
这个时候，可以进行修改，可以在所有的子元素外层，包一个div，如下：

2.原因

  vue在动态创建dom的时候，会将template中的子元素作为入口进行创建，根据这个入口，遍历以该子元素作为根节点的整个节点树，然后创建虚拟dom。template用于创建单文件组件，实际上是一种原子化的设计，可以一次定义，然后在任何地方生成dom，如果有多个子元素，就违背了这种原子设计，也就是说，一个template就只会渲染一个子组件树。如果template有多个子元素，那么vue就无法获取确切入口，就得刻意去指定某个元素作为根节点，而同时其他节点也就成为了费节点，这样无疑就增大了程序设计的复杂性，而且还增加了无用代码，有必要吗，木有啊。所以，在语法检查的时候，就会进行校验，防止出现费力不讨好的情况发生。

更多内容，请关注我的个人网站 爱秀逗 www.5ixiudou.com