“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

Vue3 has added some new features to address the developer pain caused by the poke in VUe2. At the same time, the performance of VUE2 is optimized. This article takes you through using Fragments, Teleport, and Suspense, new to VUe3.

Fragment(Fragmentation node)

I wonder if you have encountered the following error message in VUe2:

This is avue2Error message thrown. This means that a component can have only one root element. When we create a new VUE page, there are usually several different element nodes. We’ll wrap one in the outermost layerdivMake it the root node of the page. But it was not friendly. Sometimes we don’t need thisdivElements.

Vue3 solves this problem. Vue3 added a dom-like tag element
. If you have multiple element nodes in a VUE page. At compile time, vue adds a
tag to these element nodes. And the tag does not appear in the DOM tree.

Suspense(Asynchronous component)

Vue3 provides a component for controlling asynchronous components.

// Create an asynchronous component
<script>
const { createApp,defineAsyncComponent } = Vue
const app = createApp({})
const AsyncComp = defineAsyncComponent(
    () = >
        new Promise((resolve, reject) = > {
          setTimeout(() = > resolve({
            template: '
      

       I am async! 
      
'
          }),3000)
        })
)
app.component('async-component', AsyncComp)
app.mount('#app')
</script>
Copy the code

Wrap asynchronous components async-Component in Suspense

<Suspense>
    <template #default>
      <async-component />
    </template>
    <template #fallback>
      Loading ...
    </template>
  </Suspense>
Copy the code

The above asynchronous component uses a timer and displays the component after 3 seconds. We can define the asynchronous component by providing a set of parameters via defineAsyncComponent

Import {defineAsyncComponent} from 'vue' const AsyncComp = defineAsyncComponent({// factory function loader: () => import('./ foo.vue '), // Components to use when loading asynchronous components loadingComponent: loadingComponent, // components to use when loading failure errorComponent: ErrorComponent, / / delay before displaying loadingComponent | default value: 200 delay (ms) : 200, // If timeout is provided and the loading time of the component exceeds the set value, the error component will be displayed // Default: Infinity (i.e., never timeout, in ms) timeout: 3000 / / define components can hang | default value: true suspensible: False, /** ** @param {*} error Error message object * @param {*} Retry a function that indicates that when promise loads reject, Whether the loader should retry * @param {*} fail a function, * @param {*} Maximum number of attempts allowed */ onError(error, retry, fail, Attempts) {if (error.message.match(/fetch/) && attempts <= 3) {// Retry if error occurs, up to 3 retry()} else {// Note, Retry /fail is like promise's resolve/reject: // either must be called to continue error handling. fail() } } })Copy the code

Asynchronous components wrapped in Suspense will be controlled when suspensible is true in the configuration item

Portal(Portal)

In VUe2 we may use component libraries such as Element-UI, iView, etc. Sometimes we find that some of the component rendering layers in these UI component libraries are not included in the Vue DOM. The hierarchy of components such as Modal Toast is outside the Vue DOM. This hierarchy outside of VUE is convenient for global processing and management. Vue3 provides a pair of
to move the dom hierarchy

<div id="app"> <h1>Hello Async Component</h1> <com-a /> </div> <div class="i-can-fly"></div> // a const {createApp} = Vue const componentA = { template: '<com-b>< div class="i-can-fly"> </div>'} const componentB ={template: <div class=" I can fly"> const app = createApp({}) componentB ('com-b',componentB) app.component('com-a',componentA) app.mount('#app')Copy the code

At this point we open the console and look at the elementsThe rendered result is as follows. Then we modify the code to addteleportThe label

<div id="app"> <----... ---> <teleport to=".i-can-fly"> <com-a /> </teleport> </div> <div class="i-can-fly"></div>Copy the code

At this point we find component B is no longer in the app. Instead, it appears in div with class selector i-can-fly.

Note that the to parameter on the Teleport tag indicates the location to which the contents of the package are to be moved.

The last

If the article has the inadequacy place, also invites everybody to criticize to point out.

Thank you for watching this article hope to give a 👍 comment collection three even! Your likes are my motivation to write.