2.4Java全栈开发前端+后端（全栈工程师进阶之路）-前端框架VUE3-基础-Vue组件-异步组件

在实际开发中，一个应用可能会非常复杂。它可能会由很多组件组成。如果在应用启动时就加载所有组件，势必会造成效率低下。因此，正确的方式应该是按需加载。也就是先加载必要组件，然后根据需求在加载其它组件。

为了实现这个需求，Vue为我们提供了异步组件。

官网解释：在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染

<div id="app">
    <mycomponent></mycomponent>
</div>

<template id="mytemplate">
    <div>
        <p>我是父组件</p>
        <subcomponent1></subcomponent1>
        <subcomponent2></subcomponent2>
    </div>
</template>

<script src="../js/vue3.js"></script>
<script>
    Vue.createApp({
        data(){
            return {}
        },
        components:{
            mycomponent:{
                template:'#mytemplate',
                data(){
                    return {
                    }
                },
                components:{
                    subcomponent1:{
                        template:`<div>我是子组件1</div>`
                    },
                    subcomponent2:Vue.defineAsyncComponent(()=>{
                        return new Promise((resolve,reject)=>{
                            setTimeout(()=>{
                                resolve({
                                    template:'<div>我是子组件2</div>'
                                })
                            },3000);
                        });
                    })
                }
            }
        }
    }).mount('#app');
</script>

上面代码中声明了两个子组件，一个是同步组件，一个是异步组件。

使用 Vue.defineAsyncComponent 来声明异步组件，并且它要求返回一个Promise对象。

代码运行后，先加载第一个子组件，3秒钟后加载第二个组件。