在一次代码优化中用到了， 感觉还不错， 记录下~
基础用法
ES 模块动态导入也会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。类似 Vite 和 Webpack 这样的构建工具也支持此语法 (并且会将它们作为打包时的代码分割点)，因此我们也可以用它来导入 Vue 单文件组件：
const AsyncComp = defineAsyncComponent({
// 加载函数
loader: () => import('./Foo.vue'),
// 加载异步组件时使用的组件
loadingComponent: LoadingComponent,
// 展示加载组件前的延迟时间，默认为 200ms
delay: 200,
// 加载失败后展示的组件
errorComponent: ErrorComponent,
// 如果提供了一个 timeout 时间限制，并超时了
// 也会显示这里配置的报错组件，默认值是：Infinity
timeout: 3000
})
最后得到的 AsyncComp 是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数。它会将接收到的 props 和插槽传给内部组件，所以你可以使用这个异步的包装组件无缝地替换原始组件，同时实现延迟加载。
defineAsyncComponent 使用方式还有很多， 详见官网
通过以上描述得知：
- 可以类似于路由懒加载一样， 按需加载组件
- 可以动态注册组件
- 可以设置不同周期 。 加载与错误状态
基于以上一点， 优化我们的代码
需求： 根据地址栏参数加载不同组件
应用
<comp v-if="name === 'comp'" />
<comp2 v-else-if="name === 'comp2'" />
<comp3 v-else-if="name === 'comp3'" />
<comp4 v-else-if="name === 'comp4'" />
<comp5 v-else-if="name === 'comp5'" />
<comp6 v-else-if="name === 'comp6'" />
<van-empty v-else description="请输入正确的地址" />
import comp from './*index.vue'
import comp2 from './^.vue'
import comp3 from './^.vue'
import comp4 from './^.vue'
import comp5 from './*x.vue'
import comp6 from './*.vue'
优化之后
<div >
<component :is="Comp" />
</div>
export default defineComponent({
setup() {
const { Comp} = getComp ('index')
return {
specialComp
}
}
})
import { computed } from 'vue'
import { defineAsyncComponent, h } from 'vue'
import { useRoute } from 'vue-router'
import { Empty } from 'vant'
import 'vant/es/empty/style' // 引入函数组件的样式
/**
* 从 链接中获取当前组件并返回出去
* @param type {string} - index 首页 result 结果页
*/
export const getUrlUrlComp = (type:'index'|'result') => {
const route = useRoute()
// 对应pages 目录名
const name = computed(() => {
const name = route.query.name || ''
return name
})
// 异步加载
const getComp = defineAsyncComponent({
loader: () => import(`./pages/${name.value}/${type}.vue`),
// 加载异步组件时使用的组件
errorComponent: h(
'div',
{
className: 'classdiv'
},
[
h(Empty, {
className: 'van-empty',
imageSize: 100,
description: '请输入正确的地址'
})
]
)
})
return {
specialComp
}
}
总结
异步加载真香
- vue2 使用 component: () => import('./**.vue')
- vue3 defineAsyncComponent
如有错误，还请指正。
