1,异步组件介绍
在项目中,有的组件仅在需要时才会加载,这时就需要用到异步组件。
异步组件本质上是一个函数,该函数调用后返回一个Promise
,Promise
成功的结果是一个组件对象。一般使用 import() 动态导入组件作为这个 Promise
。
// 函数需要返回一个 Promise
const AsyncComponent = () => {
return new Promise((resolve) => {
setTimeout(async () => {
const MyComp = await import("./MyComp.vue");
resolve(MyComp);
}, 3000);
});
};
2,组件中使用
异步组件也可以在组件中使用,比如某些场景下需要获取数据后才能加载某组件。
2.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
})
2.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>
也可以全局注册
app.component('MyComponent', defineAsyncComponent(() =>
import('./components/MyComponent.vue')
))
也能处理加载状态
const AsyncComp = defineAsyncComponent({
// 加载函数
loader: () => import('./MyComponent.vue'),
// 加载异步组件时使用的组件
loadingComponent: LoadingComponent,
// 展示加载组件前的延迟时间,默认为 200ms
delay: 200,
// 加载失败后展示的组件
errorComponent: ErrorComponent,
// 如果提供了一个 timeout 时间限制,并超时了
// 也会显示这里配置的报错组件,默认值是:Infinity
timeout: 3000
})
3,路由中使用
路由懒加载
{
name: "Home",
path: "/",
// webpackChunkName 用于分包
component: () => import(/* webpackChunkName: "home" */ "@/views/Home"),
meta: { title: "首页" },
}
Vue Router 只会在第一次进入这个页面时调用这个函数,然后使用缓存数据。也就是说,已经加载过的组件不会重新加载。
3.1,vue3语法
封装实现异步页面。文章来源:https://www.toymoban.com/news/detail-740359.html
// utils/index.js
import { defineAsyncComponent } from "vue";
import Loading from "../components/Loading.vue";
import "nprogress/nprogress.css";
import NProgress from "nprogress";
NProgress.configure({
trickleSpeed: 50,
showSpinner: false,
});
function getAsyncPage(path) {
return defineAsyncComponent({
loader: async () => {
NProgress.start();
await delay();
const comp = await import(path);
NProgress.done();
return comp;
},
loadingComponent: Loading, // 当promise在pending状态时,将显示这里的组件
});
}
import { getAsyncPage } from "../util";
const Home = getAsyncPage("../views/Home.vue");
const About = getAsyncPage("../views/About.vue");
export default [
{ path: "/", component: Home },
{ path: "/about", component: About },
];
以上。文章来源地址https://www.toymoban.com/news/detail-740359.html
到了这里,关于Vue 的异步组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!