vue实现fragment

Vue 3 实现 Fragment 的方法

Vue 3 原生支持 Fragment（片段），允许组件返回多个根节点而无需包裹额外的 DOM 元素。以下是具体实现方式：

直接使用多根节点模板

<template>
  <div>节点1</div>
  <div>节点2</div>
</template>

通过渲染函数实现

import { h } from 'vue'

export default {
  render() {
    return [
      h('div', '节点1'),
      h('div', '节点2')
    ]
  }
}

Vue 2 实现 Fragment 的替代方案

Vue 2 不支持原生 Fragment，但可以通过以下方式模拟：

使用虚拟包裹元素

<template>
  <div style="display: contents">
    <div>节点1</div>
    <div>节点2</div>
  </div>
</template>

通过第三方库实现 安装 vue-fragment 库：

npm install --save vue-fragment

使用示例：

<template>
  <fragment>
    <div>节点1</div>
    <div>节点2</div>
  </fragment>
</template>

<script>
import { Fragment } from 'vue-fragment'
export default {
  components: { Fragment }
}
</script>

注意事项

使用 Fragment 时需确保所有子节点具有稳定的 key（特别是在 v-for 场景下）

某些 CSS 功能（如 flex/grid 布局）可能需要调整，因为 Fragment 不会生成实际 DOM 元素

Vue 3 的 Teleport 和 Suspense 组件常与 Fragment 配合使用，可实现更灵活的布局方案