In modern web applications, a large number of asynchronous requests and loading operations are often required. Creating asynchronous components in can easily implement asynchronous loading, but when asynchronous components are loaded repeatedly, it will have an impact on performance, because network requests are made every time they are reloaded, which will affect the user's interactive experience.
To solve this problem, Vue3 provides a new API in its new version called Suspense, which makes loading of asynchronous components more efficient and smooth. In this article, we will learn more about how Vue3 Suspense handles asynchronous component loading and how to use it to improve the performance of your web application.
1. What is Vue3 Suspense?
<Suspense>is a built-in component used to coordinate the processing of asynchronous dependencies in the component tree. It allows us to wait on the component tree for multiple nested asynchronous dependencies to be parsed in the lower layer, and can render a load state while waiting.
Vue3 Suspense is a new feature introduced in the latest version (v3.2.0+), which aims to improve the user experience and make the loading state of the page smoother. Unlike traditional Loading Components, Suspense can directly control the state of the application without rendering any DOM.
Vue3 Suspense is a new feature of Vue3 that optimizes and improves the loading process of asynchronous components. Vue3 Suspense allows us to get rid of the callback function or promise chain call from the way components are loaded asynchronously, and instead use a unified lazy loading syntax to separate all asynchronous component declarations.
When the component is loaded, if the node is not ready, force the component rendering to enter a pause state. This can make the page smoother and the user will not feel the process of refreshing the page.
In Vue, we can dynamically import components through the import function:
const Foo = () => import('./')However, since asynchronously loaded components take a certain amount of time to complete loading, the page may be blank during the loading process, which will bring bad experience to the user.
In Vue3, we can solve this problem by using Suspense.Suspense allows us to define some placeholders to show content before the asynchronous component is loaded, and can automatically switch to the real component after the asynchronous component is loaded.
2. How to optimize asynchronous component loading in Vue3 Suspense?
Vue3 Suspense uses many technical means to optimize the loading of asynchronous components. Here we introduce two of the more common methods:
(1) Asynchronous requests to load in parallel
Vue3 Suspense allows us to load multiple asynchronous components in parallel, rather than loading them one by one in order as in previous versions. This reduces waiting time, improves loading speed and user experience.
In the following example, we can see that the loading of the asynchronous component is parallel.
<template>
<div>
<h1>{{ message }}</h1>
<suspense>
<template #default>
<async-component></async-component>
<async-component></async-component>
<async-component></async-component>
</template>
<template #fallback>
Loading...
</template>
</suspense>
</div>
</template>
<script>
import { defineComponent } from 'vue'
const AsyncComponent = () => import('./')
export default defineComponent({
name: 'App',
components: {
AsyncComponent,
},
setup() {
const message = 'Hello, World!'
return {
message,
}
},
})
</script>In the above code, we define three asynchronous components to load in parallel, which means they will be downloaded at the same time and do not have to wait for the previous component to complete before the download of the next dynamic component is started. When components are loaded, if they are not ready, Vue3 Suspense renders the components into a pause state until they are ready and then processed together.
(2) Let the asynchronous components be lazy to load and prefetch them in advance
Another optimization technique in Vue3 Suspense is to make asynchronous components lazy load and perform prefetching in advance.
By lazy loading, components are loaded only when used, rather than loading all components when the page is initially loaded.
By performing an advance prefetch, components can be loaded in advance without waiting for the user to click to ensure they are available immediately if needed.
The following example demonstrates how to lazy load and perform an asynchronous component in Vue3 Suspense:
<template>
<div>
<h1>{{ message }}</h1>
<suspense>
<template #default>
<async-component></async-component>
</template>
<template #fallback>
Loading...
</template>
</suspense>
</div>
</template>
<script>
import { defineComponent, onMounted } from 'vue'
const AsyncComponent = () => import('./')
export default defineComponent({
name: 'App',
components: {
AsyncComponent,
},
setup() {
const message = 'Hello, World!'
onMounted(() => {
AsyncComponent().then(component => {
component.__requestInterception = true // Turn on interception and pre-fetch in advance component.__navigate('preload') // Pre-fetch in advance })
})
return {
message,
}
},
})
</script>In the above code, we define an asynchronous component and perform an advance prefetch operation in the onMounted lifecycle hook function. This allows you to request components in advance before the user interaction, i.e. when the page is loaded, to improve the user experience.
3. How to use Suspense in Vue3?
To use Vue3 Suspense, we need to follow these three basic steps:
(1) Use<suspense>Tag wrapping asynchronous components.
(2) in the default<template>A tag declares a tag containing an asynchronous component.
(3) on fallback<template>Add waiting prompt information to the tag.
Here is a simple Vue3 Suspense example:
<template>
<div>
<h1>{{ message }}</h1>
<suspense>
<template #default>
<async-component></async-component>
</template>
<template #fallback>
Loading...
</template>
</suspense>
</div>
</template>
<script>
import { defineComponent } from 'vue'
const AsyncComponent = () => import('./')
export default defineComponent({
name: 'App',
components: {
AsyncComponent,
},
setup() {
const message = 'Hello, World!'
return {
message,
}
},
})
</script>In the above code snippet, I first use<suspense>The tag wraps the asynchronous component. Then, in the default template tag, we declare the asynchronous component to render, and add the "Loading..." prompt message to fallback.
In Vue3 Suspense, the user experience is more friendly because it allows users to see a more friendly prompt message telling the user that they are working hard to load so that the user will not feel that the program has errors or hangs.
4. Let's summarize
Vue3 Suspense is a new feature of Vue3 that optimizes and improves the loading process of asynchronous components and improves the user experience. Vue3 Suspense can reduce wait time and improve loading speed through technologies such as parallel loading and lazy loading and performing early prefetching.
Using Vue3 Suspense is very simple, just use it in a template<suspense>Mark the package asynchronous component, declare the asynchronous component in the default template tag, and add a waiting message to the template tag of fallback.
In actual applications, you can combine other technologies to optimize the loading of asynchronous components according to your needs. For example, in SSR, you can use Suspense to cache asynchronous components to reduce rendering time and network requests. We can also use it in conjunction with Vue Router and Vuex for better results. When using Suspense, you need to pay attention to:
- The Suspense component must wrap the components that need to be loaded asynchronously.
- A fallback template needs to be defined to display the Loading status before the asynchronous component loads.
- The component can be rendered into the specified DOM node using the Teleport element.
- It is necessary to build a complete asynchronous component loading solution based on the specific situation, combining Vue Router and Vuex.
Through the above points, we can better grasp the usage of Vue3 Suspense, make your page smoother and improve the user experience.
Vue3 Suspense makes loading of asynchronous components more efficient and smooth, making the user experience more friendly. At present, I suggest in advance that you try to use Vue3 Suspense when developing applications and learn its usage. After the official Suspense functions are improved in the future, it can be used to improve the performance and experience of web applications.
The above is the detailed content of the working principle of Vue3 Suspense for asynchronous rendering. For more information about Vue3 Suspense asynchronous rendering, please pay attention to my other related articles!