1、异步组件用法
js
Vue.component(
'async-webpack-example',
() => import('./my-async-component')
)
2、使用场景
如果我们需要展示某个产品的信息,产品关联的tab页面有20个,使用异步组件就使得代码很简单,减少了组件的注册
js
<template>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="first"></el-tab-pane>
<el-tab-pane label="配置信息" name="second"></el-tab-pane>
<el-tab-pane label="角色信息" name="third"></el-tab-pane>
<el-tab-pane label="部门信息" name="fourth"></el-tab-pane>
...
<el-tab-pane label="其他信息" name="twenty"></el-tab-pane>
</el-tabs>
<async-webpack-example />
</template>
<script>
export default {
data() { return { activeName: 'second' }; },
methods: {
handleClick(path) {
Vue.component(
'async-webpack-example',
() => import('./my-async-component/'+ path)
)
}
}
};
</script>
3、源码
-
使用
defineAsyncComponent
定义异步组件,它返回一个包装了异步加载逻辑的组件选项对象。 -
创建一个占位符组件,在异步组件加载完成前用于渲染。
-
在占位符组件的渲染函数中处理异步加载逻辑,返回一个
Suspense
组件用于展示加载状态。 -
使用
import()
动态导入组件模块,返回一个 Promise 对象。 -
创建异步组件的渲染函数,根据组件的选项对象创建。
-
替换占位符组件,将异步组件渲染到占位符组件的位置。
4、编译原理
疑问:webpack编译是按需加载,也就是我们用到了哪些代码,才会进行编译打包。当我们使用异步组件的时候,path是一个变量,如何做到把这些路径的文件提前编译呢?
带着这样的疑问我们来看看 Vue.component 的编译代码吧
欢迎关注我的前端自检清单,我和你一起成长