目录
- 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>
也可以全局注册
app.component('MyComponent', defineAsyncComponent(() =>import('./components/MyComponent.vue')
))
也能处理加载状态
const AsyncComp = defineAsyncComponent({// 加载函数loader: () => import('./MyComponent.vue'),// 加载异步组件时使用的组件loadingComponent: LoadingComponent,// 展示加载组件前的延迟时间,默认为 200msdelay: 200,// 加载失败后展示的组件errorComponent: ErrorComponent,// 如果提供了一个 timeout 时间限制,并超时了// 也会显示这里配置的报错组件,默认值是:Infinitytimeout: 3000
})
以上。