Understanding Fragment in Vue3

Vue series of articles

• Understanding v-memo in Vue3
• Understanding Suspense in Vue3
• Understanding reactive, isReactive and shallowReactive in Vue3
• Understanding defineModel in Vue3
• Understanding Fragment in Vue3
• Understanding Teleport in Vue3
• Understanding Async Components in Vue3
• Understanding v-model in Vue3
• Understanding watch and watchEffect in Vue3
• Understanding and Practice of the Vue3 Composition API
• Understanding Hooks in Vue3 (Why use hooks)
• Vue3- Use and Encapsulation Concept of Custom Hooks Functions
• Understanding the various ref in Vue3: toRef, toRefs, isRef, unref, etc
• Vue3 Development Solutions(Ⅰ)
• Vue3 Development Solutions(Ⅱ)
• The details about Vue3 that you didn’t know
• Vue3 develop document
• 28 Vue Interview Questions with Detailed Explanations

I wonder if anyone has encountered the following error information in Vue2:

Errors compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

This is an error prompt thrown by Vue2. It means that a component can only have one root element. When we create a new Vue page, there are usually multiple different element nodes. We will wrap a div at the outermost layer to make it the root node of this page. But this is not user-friendly. Sometimes we don’t need this div element.

Vue3 has solved this problem. Vue3 has introduced a new DOM-like tag element <Fragment></Fragment>. If there are multiple element nodes in the Vue page, Vue will add a <Fragment></Fragment> tag to these element nodes during compilation. And this tag does not appear in the DOM tree.

Example

<template>
 <header>...</header>
 <main v-bind="$attrs">...</main>
 <footer>...</footer>
</template>