在Vuejs中，所谓片段实例是指组件的模板包含零个或多个根节点，例如

1
2
3
4
5
6
7
8
9
10
<!-- 零个根节点 -->
<template>
I have no root node
</template>

<!-- 多个根节点 -->
<template>
<div>root node 1</div>
<div>root node 2</div>
</template>

虽然Vue能够处理片段实例，但是会产生种种缺陷，例如组件元素上的非流程控制指令，非prop特性和transition将被忽略，性能也要稍微差一些。因此，除非万不得已，应该尽量避免产生片段实例。

产生片段实例的情况有以下几种：

  1. 模板包含多个顶级元素。
  2. 模板只包含普通文本。
  3. 模板只包含其它组件（其它组件可能是一个片段实例）。
  4. 模板只包含一个元素指令，如 或 vue-router 的 。
  5. 模板根节点有一个流程控制指令，如 v-if 或 v-for。

情况1、2会产生多个或零个根节点，3、4、5可能会产生多个或零个根节点。即使是可能，Vue在碰到情况3、4、5时也会把组件视为片段实例而发出警告，因此也要尽量避免这3种情况。

避免片段实例的方法很简单，即在构造组件模板时，始终添加一个根元素div，如：

1
2
3
4
5
<template>
<div>
  始终添加一个顶级div，避免片段实例
</div>
</template>