defineAsyncComponent 异步组件

Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：

// 将
// import UserDetails from './views/UserDetails'
// 替换成
const UserDetails = () => import('./views/UserDetails')


const router = createRouter({
  // ...
  routes: [{ path: '/users/:id', component: UserDetails }],
})

component (和 components) 配置接收一个返回 Promise 组件的函数，Vue Router 只会在第一次进入页面时才会获取这个函数，然后使用缓存数据。

一般来说，对所有的路由都使用动态导入是个好主意。

注意：不要在路由中使用异步组件。异步组件仍然可以在路由组件中使用，但路由组件本身就是动态导入的。

Vue3 支持 defineAsyncComponent() 方法定义一个异步组件，它在运行时是懒加载的。参数可以是一个加载函数，或是对加载行为有更进一步控制的一个选项对象。

在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。为实现这点，Vue 提供了一个 defineAsyncComponent 方法：

import { defineAsyncComponent } from 'vue'


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

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

对于 defineAsyncComponent 使用场景，有的需求会想要在两个组件间来回切换，比如 Tab 界面：

<!-- currentTab 改变时组件也改变 -->
<component :is="currentTab"></component>

上面的例子是通过 Vue 的动态组件实现视图切换的。

<script lang="ts">
import { ref, defineAsyncComponent } from 'vue'


const AsyncComp1 = defineAsyncComponent(() =>
  import('./components/MyComponent1.vue')
)
const AsyncComp2 = defineAsyncComponent(() =>
  import('./components/MyComponent2.vue')
)


export default {
  components: {
    AsyncComp1,
    AsyncComp2
  },
  setup() {
    const currentTab = ref('AsyncComp1')


    function change() {
      currentTab.value = currentTab.value === 'AsyncComp1' ? 'AsyncComp2' : 'AsyncComp1'
    }
    return {
      currentTab,
      change
  }
}
</script>


<template>
  <div>
    <div @click="change">视图切换</div>
    <component :is="currentTab"></component>
  </div>
</template>

但是下面这里是一个 React 的例子，展示如何在你的应用中使用 React.lazy 和 React Router 这类的第三方库，来配置基于路由的代码分割。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';


const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));


const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

由于 React Router 没有支持动态导入，所以直接使用 import 语法是不可以的，必须借助 React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）