defineAsyncComponent 异步组件-技术圈

defineAsyncComponent 异步组件

共 1982字，需浏览 4分钟

· 2022-05-21

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 界面：

<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 = () => (      Loading...

}> } /> } /> );

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