Fragments 的优势

那么为何 Fragments 如此重要呢？这个新特性为开发者带来了一系列显著的优势：

• 消除不必要的 DOM 节点: 在 Vue 3 之前，组件内只能有一个根元素，这意味着必须使用额外的 DOM 元素包裹组件的多个元素，这经常导致 HTML 结构变得复杂且冗余。Fragments 可以直接省去这些不必要的包裹节点，从而简化 DOM 结构，提高代码的可读性和维护性。
• 提高性能: 少了多余的 DOM 节点后，浏览器对页面的渲染和操作会变得更快，显著提高了性能。
• 更好的语义化: 使用 Fragments，你能够保持 HTML 结构更加语义化，避免使用不必要的 div 或其他元素来进行包裹。
• 更灵活的布局: Fragments 使组件更加独立和灵活。你可以在一个组件中返回不同类型的顶级元素，这在一些自定义布局时非常有用。

如何使用 Fragments

vue3 中，无需额外配置即可直接使用Fragments

因此参照一下代码， 我们可以直接在组件模板里返回多个根节点

<!-- ListComponent.vue -->
<template>
  <h2>名称列表</h2>
  <ul>
    <li v-for="item in items" :key="item.id">
      <strong>{{ item.name }}</strong
      >: {{ item.description }}
    </li>
  </ul>
</template>

<script>
export default {
  name: "ListComponent",
  data() {
    return {
      items: [
        { id: 1, name: "Apple", description: "一种水果" },
        { id: 2, name: "Carrot", description: "一种蔬菜" },
        { id: 3, name: "Banana", description: "另一种水果" },
      ],
    };
  },
};
</script>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24