Understanding Async Components 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

Background

When developing Vue projects, most people will use components. In the parent component, the child components are generally loaded in sequence, where the parent component is loaded after the child component. For example:

// app.vue
<script setup>
import {onMounted} from 'vue'
import ChildVue from './child.vue'
onMounted(() => {
    console.log('app')
})
</script>
<template>
    <ChildVue />
</template>

// child.vue
<script setup>
import {onMounted} from 'vue'
onMounted(() => {
    console.log('child')
})
</script>

Running result:

child
app

If a page has many child components, since the child components are loaded first, the parent component may experience a rather long white screen waiting time. How can we make the child.vue component load asynchronously? Vue3 provides a new defineAsyncComponent method to implement asynchronous components.

Usage

• Lazy Loading: Asynchronous components allow delaying the loading of…