vue3新增Suspense组件

在开始介绍Vue的Suspense组件之前，我们有必要先了解一下React的Suspense组件，因为他们的功能类似。

React

React 16.6 新增了 <Suspense> 组件，让你可以“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示：

const ProfilePage = React.lazy(() => import('./ProfilePage')); // 懒加载

// 在 ProfilePage 组件处于加载阶段时显示一个 spinner
<Suspense fallback={<Spinner />}>
  <ProfilePage />
</Suspense>

Suspense 组件常常和 React.lazy 配合使用。

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

Vue

defineAsyncComponent 类似于 React.lazy 函数。

import { defineAsyncComponent } from 'vue'

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

app.component('async-component', AsyncComp)

Vue 中也有 Suspense 组件，和 React 中的类似。

const OtherComponent = defineAsyncComponent(() => import('./OtherComponent'));


<template>
  <Suspense>
    <template #default>
      <OtherComponent />
    </template>
    <template #fallback>
      Loading ...
    </template>
  </Suspense>
</template>

具名插槽的缩写是在 vue2.6.0 新增，跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：