vue每个组件必须只有一个根元素导致dom不必要的嵌套，如何避免呢？

Question

  <template>
        <div>  /** 这个div导致dom多嵌套了一层？！！我其实不是很需要这个div，xx */            <article v-for="item for list" :key="item.id">
                {{item.desc}}            </article>
        </div>    
    </template>

这个div导致dom多嵌套了一层？！！我其实不是很需要这个div, xx ,有没有解决办法呢？新手求教

Answer 1

你可以尽量用语义化的标签取代div这种标签，比如渲染正文可以用main，侧栏aside之类的或者section，另外如果要针对这个组件做整体样式控制，多一父级包裹其实方便样式管理。

Answer 2

如果是vue 1.0是允许template下直接到需要显示的元素，但是官方推荐在外面包一个父元素。而到了vue2.0就是必须在外面包一个父元素了，不然会显示不出来的。