当做一个不可见的包裹元素，减少不必要的DOM元素，整个结构会更加清晰。

被当做一个不可见的包裹元素，主要用于分组的条件判断和列表渲染。
https://blog.csdn.net/u013594477/article/details/80774483

包裹嵌套其它元素，使元素具有区域性，自身具有三个特点：
*隐藏性：不会显示在页面中
*任意性：可以写在页面的任意地方
*无效性： 没有一个根元素包裹，任何HTML内容都是无效的

template作用：相当于一个占位符，不显示在页面中，减少了不必要的dom元素
场景：结合v-for、v-if等一起使用，插槽时使用

<div>
    <template v-for="(item, i) in arr" :key="item.id">
        <div>{{item.text}}</div>
        <span>{{item.text}}</span>
    </template>
</div>

这么写，就不会额外增加一个div了，template标签就是一个模板占位符，编译的过程中，不会渲染成元素，用来帮我们包裹元素

还有一个优点

可以把 v-if v-for 等指令写在template标签中，把事件绑定写在template的子元素中，这样html结构就更清晰，标签数量不会过长。