Fragments is a function in Vue 3 that allows components to return multiple root nodes. In Vue 2, everything must be wrapped with a single element. 1. Fragments allows components to directly return multiple parallel nodes, such as

and

without wrapping in parent elements; 2. It improves structural semantics, avoids unnecessary nesting, optimizes layout and performance; 3. Simple to use, just write multiple top-level nodes directly under the <template> tag; 4. Notes include ref management problems caused by the lack of unified parent nodes, scoped style scope impact, and Transition animation restrictions, which are usually solved by manually processing refs or adding package containers.

Fragments in Vue 3 is a function that allows components to return multiple root nodes, which is not supported in Vue 2. Previously, each component had to have a single root element wrapping everything, otherwise an error would be reported. Vue 3 introduces support for Fragments, making component structure more flexible.

What are Fragments?

Simply put, Fragments is a component that can return multiple concurrent nodes, rather than having to be nested in a parent node.
For example, you can write directly in a component:

 <template>
  <h1>Title</h1>
  <p>Descriptive text</p>
</template>

Vue 3 will not force you to wrap these two tags in a div or other container. This is helpful for scenarios such as layout, accessibility, style isolation, etc.

Why do you need Fragments?

Sometimes we want to keep the semantics of HTML structures or avoid unnecessary nesting, such as:

• When using the <tr> tag, you cannot wrap another layer of div outside, otherwise the structure will be destroyed.
• Want to use CSS Flex or Grid layout, but adding an extra layer of container in the middle will affect the layout effect.
• Reduce unnecessary DOM nodes and improve performance and readability.

With Fragments, these problems are easier to solve.

How to use Fragments?

The usage method is very simple. You only need to write multiple top-level nodes directly under the <template> tag, without additional declarations.

For example:

 <template>
  <header>Header</header>
  <main>Main content area</main>
  <footer>Bottom information</footer>
</template>

This code is completely legal in Vue 3, and will not report errors or automatically add package elements.

What should be noted is:

• If you are using <script setup></script> or Composition API, there is no need to do any special treatment.
• When using JSX or rendering functions, you can also achieve similar effects by returning an array.

Things to note

Although Fragments are convenient, there are some things to pay attention to:

• There is no common parent node : If you rely on certain operations (such as adding refs to the entire component), it may need to be handled manually.
• Style scope problem : If you use scoped style, each top-level node will have a data attribute individually, which may affect some selectors.
• Transition animation limitations : There may be problems when wrapping Fragment with <transition></transition> , because Transition can only handle a single root node.

If you encounter these problems, the solution is usually:

• Add ref to key nodes and process them separately.
• Pack multiple nodes in a layer of container to meet animation or layout requirements.

Basically that's it. Fragments is a seemingly small but easy to use feature in Vue 3, especially if you want to reduce redundant DOM.

The above is the detailed content of What are Fragments in Vue 3?. For more information, please follow other related articles on the PHP Chinese website!