This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Record && Accumulate! Several previous articles began with a summary of Vue3 learning:

  • Vue3-defAsyncComponent Asynchronous component (new),
  • Vue3-Suspense for asynchronous requests,
  • Vue3-teleport changes the root node to which the component is mounted,
  • Vue3-computed & watch,
  • Vue3- Life cycle and setup() function,
  • Vue3- Initial experience,

Vue3 is a new Vue3 feature that fragments are translated into fragments.

Vue3 is new and specialfragments:

Vue 3 now officially supports multi-node components, namely fragments!

inVue2.xThe component has only one root node,

We know that vue2. x has only one root node, if there are more than one root node will be reported error, in vue2. x component template template also nested a root node, such as

… 
/// src/components/Layout.vue
<template>
  <div>
    <header>This is a component Header</header>
    <main>This is another component Main...</main>
    <footer>Also, there can be multiple components of Footer...</footer>
    <my-component1>Customize component 1</my-component1>
    <my-component2>User-defined group 2</my-component2>
  </div>
</template>
Copy the code

In Vue3. X, multiple root nodes can be defined:

In ve2. X, each component has a root node, which gives you an extra tag, making custom components more likely to have unnecessary tag elements.

In Vue3. X, a component can contain multiple root nodes! However, this requires the developer to explicitly define where the attributes should be distributed.

/// src/components/Layout.vue
<template>
  <header>This is a component Header</header>
  <main v-bind="$attrs">This is the Main component again</main>
  <footer>Also, there can be multiple components of Footer...</footer>
    <my-component1>Customize component 1</my-component1>
    <my-component2>User-defined group 2</my-component2>
</template>
Copy the code