面试题：Vue中Fragment的基本使用场景有哪些

Question

在Vue开发中，阐述Fragment的常见使用场景，并举例说明如何在模板中使用Fragment来包裹多个元素而不额外增加DOM节点。

Answer 1

Fragment常见使用场景

1. 列表渲染：当需要渲染列表项，每个列表项可能包含多个元素，但又不想在列表项外层额外添加不必要的DOM节点时。例如一个任务列表，每个任务项包含任务名称、任务描述和操作按钮，若不使用Fragment，可能会在每个任务项外层额外嵌套一层无意义的div，使用Fragment可避免这种情况，保持DOM结构简洁。
2. 组件返回多个根节点：在一些复杂组件中，可能需要返回多个兄弟节点作为组件的根元素，而Vue模板要求只能有一个根元素，此时Fragment就可以解决这个问题。

在模板中使用Fragment包裹多个元素示例

<template>
  <template v-for="(item, index) in list" :key="index">
    <template>
      <h3>{{ item.title }}</h3>
      <p>{{ item.description }}</p>
      <button>操作</button>
    </template>
  </template>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { title: '任务1', description: '这是任务1的描述' },
        { title: '任务2', description: '这是任务2的描述' }
      ]
    };
  }
};
</script>

在上述代码中，template标签充当了Fragment，包裹了h3、p和button元素，在DOM中不会额外增加多余节点。Vue 3中还可以使用<Fragment>标签（需导入）达到同样效果：

<template>
  <Fragment v-for="(item, index) in list" :key="index">
    <h3>{{ item.title }}</h3>
    <p>{{ item.description }}</p>
    <button>操作</button>
  </Fragment>
</template>

<script>
import { Fragment } from 'vue';
export default {
  components: {
    Fragment
  },
  data() {
    return {
      list: [
        { title: '任务1', description: '这是任务1的描述' },
        { title: '任务2', description: '这是任务2的描述' }
      ]
    };
  }
};
</script>