异步组件

简介

就像路由中的异步加载一样，组件也能异步加载。不像v-if中已经提前加载好的，异步组件只有在需要时才加载。

基本用法

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...从服务器获取组件
    resolve(/* 获取到的组件 */)
  })
})
// ... 像使用其他一般组件一样使用 `AsyncComp`

defineAsyncComponent 方法接收一个返回 Promise 的加载函数。这个 Promise 的 resolve 回调方法应该在从服务器获得组件定义时调用。你也可以调用 reject(reason)表明加载失败。

import { defineAsyncComponent } from 'vue'

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

如上，ES模块动态导入也会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent搭配使用。

全局注册
与普通组件一样，异步组件可以使用 app.component() 全局注册：

app.component('MyComponent', defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
))

加载与错误状态

defineAsyncComponent的其他参数能够支持更高级的用法

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})

异步组件可以搭配内置的 <Suspense> 组件一起使用。

Suspense

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />

  <!-- 在 #fallback 插槽中显示 “正在加载中” -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

<Suspense>组件有两个插槽：#default和 #fallback。两个插槽都只允许一个直接子节点。
和异步组件的效果类似，在#default中内容未异步加载完成时，默认将显示#fallback中的内容。

首先在子组件中，有元素的数据需要异步获取

<template>
<div>
    <h1>name:{{ user.name }}</h1>
    <h1>age:{{ user.age }}</h1>
</div>
</template>

<script >
export default{
    async setup(){
        const fetchUser = ()=>{
            return new Promise((resolve,reject) => {
                setTimeout(()=>{
                    resolve({name:'Mike',age:'20'})
                },2000)
            })
        }

        const user = await fetchUser()

        return {user};
    }
}

</script>

而如果在父组件中直接使用子组件，那么会出现如下错误

image.png

提示我们需要使用Suspense，如下：

<template>
    <Suspense>
         //这里可以使用template包裹，并加上#default标记
        <User/>
        <template #fallback>
            Loading...
        </template>
    </Suspense>

</template>

<script setup>
import User from "./User.vue";
</script>

获取失败也可以展示失败页面效果，那就需要在父组件中使用onErrorCaptured钩子收集错误信息

image.png

和其他组件组合

我们常常会将 <Suspense> 和 <Transition>``<KeepAlive> 等组件结合。要保证这些组件都能正常工作，嵌套的顺序非常重要。
另外，这些组件都通常与Vue Router中的 <RouterView> 组件结合使用。

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- 主要内容 -->
          <component :is="Component"></component>

          <!-- 加载中状态 -->
          <template #fallback>
            正在加载...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>

Vue Router使用动态导入对懒加载组件进行了进行了内置支持。注意：这些与异步组件不同，目前它们不会触发<Suspense>。但是，它们仍然可以有异步组件作为后代，这些组件可以照常触发<Suspense>

异步组件与Suspense