Vue 的异步组件

组件"/>

Vue 的异步组件

目录

• 1，异步组件介绍
• 2，路由中使用
• 3，组件中使用
• • 3.1，Vue2 语法
  • 3.2，Vue3 语法

1，异步组件介绍

在项目中，有的组件仅在需要时才会加载，这时就需要用到异步组件。

异步组件本质上是一个函数，该函数调用后返回一个Promise，Promise 成功的结果是一个组件对象。一般使用 import() 动态导入组件作为这个 Promise。

// 函数需要返回一个 Promise
const AsyncComponent = () => {return new Promise((resolve) => {setTimeout(async () => {const MyComp = await import("./MyComp.vue");resolve(MyComp);}, 3000);});
};

2，路由中使用

常见的应用——路由懒加载

{name: "Home",path: "/",// webpackChunkName 用于分包component: () => import(/* webpackChunkName: "home" */ "@/views/Home"),meta: { title: "首页" },
}

Vue Router 只会在第一次进入这个页面时调用这个函数，然后使用缓存数据。也就是说，已经加载过的组件不会重新加载。

3，组件中使用

异步组件也可以在组件中使用，比如某些场景下需要获取数据后才能加载某组件。

3.1，Vue2 语法

Vue2官网参考

<script>
// 返回Promise
const AsyncComponent = () => {return new Promise((resolve) => {setTimeout(async () => {const MyComp = await import("./MyComp.vue");resolve(MyComp);}, 3000);});
};// 返回Promise
const AsyncComponent2 = () => import("./MyComp.vue")export default {components: {// Vue会调用该函数，并等待 Promise完成，完成之前该组件位置什么也不渲染AsyncComponent,},
};
</script>

函数也可以返回有一个配置对象，并处理加载状态。

const AsyncComponent = () => ({// 需要加载的组件 (应该是一个 `Promise` 对象)component: import('./MyComponent.vue'),// 异步组件加载时使用的组件loading: LoadingComponent,// 加载失败时使用的组件error: ErrorComponent,// 展示加载时组件的延时时间。默认值是 200 (毫秒)delay: 200,// 如果提供了超时时间且组件加载也超时了，// 则使用加载失败时使用的组件。默认值是：`Infinity`timeout: 3000
})

3.2，Vue3 语法

Vue3官网参考

需要使用 defineAsyncComponent 方法来实现，函数同样需要返回一个 Promise。

<script setup>
import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => {return new Promise((resolve, reject) => {setTimeout(async () => {const MyComp = await import("./MyComp.vue");resolve(MyComp);}, 3000);})
})const AsyncComp2 = defineAsyncComponent(() =>import('./components/MyComponent.vue')
)
</script>

也可以全局注册

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

也能处理加载状态

const AsyncComp = defineAsyncComponent({// 加载函数loader: () => import('./MyComponent.vue'),// 加载异步组件时使用的组件loadingComponent: LoadingComponent,// 展示加载组件前的延迟时间，默认为 200msdelay: 200,// 加载失败后展示的组件errorComponent: ErrorComponent,// 如果提供了一个 timeout 时间限制，并超时了// 也会显示这里配置的报错组件，默认值是：Infinitytimeout: 3000
})

以上。