异步加载组件 defineAsyncComponent 整理

重点说明：

vue的异步加载组件函数，仅支持在H5端。不支持APP、微信小程序。

 APP、微信小程序端可以实现切换组件（非异步加载），代码如下：

template:

<button @click="loadComp">载入组件 </button>
<component :is="myComponent"></component>

 

script:

// 这里已载入了test组件，所以它不是异步载入
import test from '@/components/test/test.vue'
var myComponent = ref(null)
    
function loadComp(){
    myComponent.value = test
}

 

接下来说正文：如何在H5端异步加载组件

方法一：简洁调用defineAsyncComponent函数

template:

<template>
    <view class="container">
        <button @click="loadComp">载入组件 </button>
        <component :is="myComponent"></component>
    </view>
</template>

 

script:

<script setup>
    import {
        defineAsyncComponent,
        shallowRef
    } from 'vue'

    let asyncComp = defineAsyncComponent(() => import('@/components/tes1t.vue'))
    let myComponent = shallowRef(null);

    const loadComp = () => {
        myComponent.value = asyncComp
    }
</script>

 

方法二：配置更多参数调用defineAsyncComponent函数

template:

<template>
    <view class="container">
        <button @click="loadComp">载入组件 </button>
        <component :is="myComponent"></component>
    </view>
</template>

 

script:

<script setup>
    import {
        ref,
        defineAsyncComponent,
        shallowRef
    } from 'vue'
    
   // 引入加载中组件
    import loadingComponent from '@/components/loadingComponent/loadingComponent.vue'

   // 引入加载错误组年
    import errorComponent from '@/components/errorComponent/errorComponent.vue'

   // 定义异步组件
    let asyncComp = defineAsyncComponent({
        loader: () => import('../../components/test/test.vue'),
        loadingComponent: loadingComponent,
        errorComponent: errorComponent,
        delay: 2000
    })

    let myComponent = shallowRef(null);
    const loadComp = () => {
        myComponent.value = asyncComp
    }
</script>

 

方法三：利用内置组件Suspense加载异步组件

<Suspense>
    <template #default>
        <!-- 异步要加载的组件 -->
        <myComp></myComp>
    </template>

    <template #fallback>
        <!-- 加载中组件 -->
        <loading></loading>
    </template>
</Suspense>

这种方式是纯template方式，但由于内置组件Suspense仍在开发期，后期可能会做进一步更新。