vue3 静态引入与动态引入（异步引入）

静态引入：所有的引入项都引入完成后再进行下一步操作。

动态引入：先引入完成的项，先进行下一步操作

【静态引入】
import Header from "./components/header"

【动态引入（异步引入）】
import {defineAsyncComponent} from 'vue'
const Header = defineAsyncComponent(()=>import('./components/header'))


export default {
    name: 'App',
    components: {Header},
}

动态引入可配合Suspense组件使用。实现类似骨架屏的效果

<template>
    <div>
        <h3>外层包裹</h3>
        <Suspense>
            <template v-slot:default>  //引入项引入完成后展示，v-slot:default 固定写法
                <Header />
            </template>
            <template v-slot:fallback>  //引入项引入未完成时展示，v-slot:fallback 固定写法
                <h3>正在加载中，请稍候......</h3>
            </template>
        </Suspense>
    </div>
</template>
<script>
    import {defineAsyncComponent} from 'vue'
    const Header = defineAsyncComponent(()=>import('./components/header'))

    export default {
        name: 'App',
        components: {Header},
    }
</script>