defineAsyncComponent 异步组件

前端精髓

共 1982字,需浏览 4分钟

 ·

2022-05-21 18:42


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 函数能让你像渲染常规组件一样处理动态引入(的组件)


浏览 47
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报