「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战

我们都知道在 Vue2 也有异步组件的概念，但整体上来说不算完整~，

1、Vue3 提供了 defineAsyncComponent 方法与 Suspense 内置组件，我们可以用它们来做一个优雅的异步组件加载方案。

2、异步组件高级声明方法中的 component 选项更名为loader；

2、loader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个Promise；

直接看代码

首先看Vue2中怎么声明一个异步组件

const asyncPage = () => import('./Lazy.vue')

再看Vue3中如何声明一个异步组件： Vue3中声明异步组件，需要使用辅助函数defineAsyncComponent来声明。如下

<template>
	<div>
		<h1>Async Components</h1>
		<p>异步组件测试</p>
                <child></child>
	</div>
</template>

<script>
import { defineAsyncComponent } from 'vue' 
const child = defineAsyncComponent(() => import('@/components/async-component-child.vue'))

export default {
  name: 'async-components',
  components:{
    'child': child
  }
};
</script>

Vue3 引入defineAsyncComponent 辅助函数的原因

现在，在 Vue 3 中，由于函数组件被定义为纯函数，异步组件定义需要通过将其包装在一个新的 defineAsyncComponent helper 中来显式定义。

更加高级的声明方式 Vue2中使用高级的异步组件方式声明

const asyncPageWithOptions  = {
  component: () => import('./Lazy.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}

Vue3差不多，只需要将component改为loader即可

const asyncPageWithOptions  = {
  loader: () => import('./Lazy.vue'),
  delay: 200,
    // 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）
  timeout: 3000,
   // 如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件
  // 默认值：Infinity（即永不超时，单位 ms）
  error: ErrorComponent,
    // 加载失败时要使用的组件
  loading: LoadingComponent
    // 加载异步组件时要使用的组件
}

异步组件的实现

// Lazy.vue
<template>
   <div class="lazy">
       异步组件
   </div>
</template>

<script>
</script>

<style scoped>
 
</style>

在其他组件中导入它

<template>
  <button @click="show = true"> Login </button>
  <lazy-component v-if="show" />
</template>

<script>
import { defineAsyncComponent } from 'vue'
export default {
  components:{
      "lazy-component": defineAsyncComponent(()=>import('./components/Lazy.vue'))
  },
  data() {
    return {
      show: false
    }
  }
}
</script>

异步组件有助于我们实现最佳性能。我们只想在我们的页面初始加载时加载需要的组件。有条件渲染的组件在我们的页面加载时往往是不需要的，所以为什么要让我们的应用程序加载它们呢？

Vue3异步组件【defineAsyncComponent】

直接看代码

异步组件的实现