异步组件

异步组件：在需要时再加载的组件。

异步组件的定义方式

1. 路由中使用异步组件

component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')

Vue Router自己内部已经用defineAsyncComponent()自动包装过，其本质还是用defineAsyncComponent()+import()包装普通组件。

2. 组件中使用异步组件

// <script setup>语法糖下的写法
import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

// setup()函数选项式写法
components: {
  MyComponent: defineAsyncComponent(() => import('./components/MyComponent.vue'))
}

关于defineAsyncComponent()的使用

defineAsyncComponent()函数的参数是一个工厂函数，返回一个promise。

defineAsyncComponent()什么时候使用？使用它和直接使用import()有何区别？

下面用一个小demo测试一下两者的效果。

（1）先看不用defineAsyncComponent()包裹时：

export default {
    components: {
        HelloWorld: import('@/components/HelloWorld.vue') // 这种写法页面上显示出错
    }
};

这样引入组件后，页面空白，拿不到组件。图：

（2）用defineAsyncComponent()包裹时：

import { defineAsyncComponent } from 'vue';
export default {
    name: 'Home',
    components: {
        HelloWorld: defineAsyncComponent(() => import('@/components/HelloWorld.vue'))
    }
};

页面正常，拿得到组件。图：

结论：在组件中使用异步组件时，必须用defineAsyncComponent()包裹。

为什么一定要defineAsyncComponent()包裹？

import()虽然本身自带懒加载功能，但其返回的是一个promise，vue无法直接渲染promise，而defineAsyncComponent()返回的是一个Vue组件对象，vue能直接渲染。

总结

异步组件使用场景最多的是路由懒加载。

在组件中使用异步组件时，必须用defineAsyncComponent()包裹。