Shulou(Shulou.com)06/02 Report--

Most people do not understand the knowledge points of this article "what are the characteristics of Fragment, Suspense and Portal in Vue3", so the editor summarizes the following contents, detailed contents, clear steps, and certain reference value. I hope you can get something after reading this article. Let's take a look at this article "what are the characteristics of Fragment, Suspense and Portal in Vue3".

Some new features have been added to vue3 to address the criticism of developers in vue2 who are in pain. At the same time, the performance of vue2 is optimized. This article takes you to explore the use of Fragment, Teleport, and Suspense, which are new in vue3.

Fragment (fragmentation Node)

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

This is an error message thrown by vue2. This means that a component can have only one root element. When we create a new vue page, there are usually multiple different element nodes. We will wrap a div on the outermost layer to make it the root node of the page. But it's not friendly. Sometimes we don't need this div element.

This problem is solved in vue3. A new tag element similar to dom has been added to vue3. If you have multiple element nodes in the vue page. Then vue adds a tag to these element nodes at compile time. And the tag does not appear in the dom tree.

Suspense (Asynchronous component)

A component is provided in vue3 to control asynchronous components.

/ / create an asynchronous component const {createApp,defineAsyncComponent} = Vueconst app = createApp ({}) const AsyncComp = defineAsyncComponent (() = > new Promise ((resolve, reject) = > {setTimeout (()) = > resolve ({template:'I am async'}), 3000)}) app.component ('async-component', AsyncComp) app.mount (' # app')

Wrapping Asynchronous component async-component with Suspense

Loading...

The above asynchronous component uses a timer, and the component is displayed in 3 seconds. We can define the asynchronous component through a series of parameters provided by defineAsyncComponent.

Import {defineAsyncComponent} from 'vue'const AsyncComp = defineAsyncComponent ({/ / factory function loader: () = > import ('. / Foo.vue'), / / component to use when loading asynchronous components loadingComponent: LoadingComponent, / / component to be used in case of load failure errorComponent: ErrorComponent, / / delay before loadingComponent is displayed | default: 200 (unit ms) delay: 200, / / if timeout is provided And the loading time of the component exceeds the set value, the error component / / default value will be displayed: Infinity (that is, never time out, unit ms) timeout: 3000, / / defines whether the component can be suspended | default value: true suspensible: false, / * * @ param {*} error error message object * @ param {*} retry a function indicating when the promise loader reject Whether the loader should retry * @ param {*} fail a function that instructs the loader to exit the maximum number of retries allowed by * @ param {*} attempts * / onError (error, retry, fail, attempts) {if (error.message.match (/ fetch/) & & attempts)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.