Vue2：异步组件

什么是异步组件

所谓的异步组件就是通过import或者require导入的vue组件。

为什么需要异步组件

 

vue开发过程中，我们会做出特别多的组件，包括login,header,footer,main等等，会使页面打开很慢。

异步组件的作用

可以避免页面一加载时就去加载全部的组件，从而导致页面访问时间变长的问题。使用异步加载组件后，只有当需要某个组件时才会去加载需要的组件。

 

异步组件加载

<template>
    <div>
        <component :is="n"></component>
         <AsyncComponent></AsyncComponent>
        <Box2></Box2>
    </div>
</template>

<script>
    import a from "./a.vue"
    import LoadingComponent from "./LoadingComponent.vue"//自定义组件
    import ErrorComponent from "./ErrorComponent.vue"//自定义的组件
    
    export default {
        data() {
            return {
                n: "Box1"
            }
        },
        methods: {
            fn() {
                this.n = "Box2"
            }
        },
        components: {
            Box1: a,
            Box2: () => ({
                // 需要加载的组件 (这个 `import` 函数会返回一个 `Promise` 对象。)
                component: import('./b.vue'),
                // 异步组件加载时使用的组件
                loading: LoadingComponent,
                // 加载失败时使用的组件
                error: ErrorComponent,
                // 展示加载时组件的延时时间。默认值是 200 (毫秒)
                delay: 200,
                // 如果提供了超时时间且组件加载也超时了，
                // 则使用加载失败时使用的组件。默认值是：`Infinity`
                timeout: 3000,
            })，
　　　　　　　AsyncComponent:()=>import('@/components/asyncComponent.vue')
        }
    }
</script>

<style>
</style>