完美实现vue3异步加载组件

北漂燕郊杨哥

于 2024-05-09 19:43:55 发布

阅读量471

点赞数 5

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/itopit/article/details/138628676

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

经过几个小时的努力，终于实现了，根据组件名异常加载组件，直接上代码，网上的很多代码方都有坑，先贴出比较坑的代码：

<template>
	<view class="main">		
		<view class="tops">
			<view class="info">
				<view class="item">
					<view class="tit">姓名：</view>
					<view class="txt">{{qyUser.name}}</view>
				</view>
								
			</view>
		</view>
		<view>
		<component :is="dycomp" v-if="isShow"></component>
		</view>
	</view>
</template>
<script setup>
import {  ref, defineAsyncComponent,markRaw } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import api from '../../api/api.js';
const qyUser = ref({});
//markRaw方法将组件对象标记为非响应式对象
//shallowRef代替ref来创建一个浅响应式对象
const dycomp = ref(null);
const isShow = ref(false);
onLoad(()=>{
	geQyUserInfo();
	loadAsyncComponent("mdIndex");	
});
const loadAsyncComponent = (componentName)=>{
	console.log(componentName);
	dycomp.value = defineAsyncComponent(() =>{
	  import("../components/"+componentName+".vue");
	  }
	);
	isShow.value = true;
	
}
const geQyUserInfo = ()=>{
		console.log(uni.getStorageSync("qyuserid"));
		api.geQyUserInfo({
			"qyuserid":uni.getStorageSync("qyuserid"),
		},(res)=>{
				qyUser.value = res.data.qyUser;	
		});
}
</script>
<style lang="scss" scoped>
	.main {
		background-color: #f5f6f8;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx;

		.tops {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 10rpx;

			.title {
				margin-bottom: 25rpx;
				border-left: 6rpx solid #1296db;
				padding-left: 10rpx;
			}

			.info {

				.item {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					margin-bottom: 10rpx;

					.tit {
						flex: 1;
						color: #666;
					}

					.txt {
						flex: 4;
					}
				}
			}
		}
	}
</style>

最后优化后成功异步加载组件的代码：

<template>
	<view class="main">		
		<view class="tops">
			<view class="info">
				<view class="item">
					<view class="tit">姓名：</view>
					<view class="txt">{{qyUser.name}}</view>
				</view>
								
			</view>
		</view>
		<view>
		<component :is="dycomp" v-if="isShow"></component>
		</view>
	</view>
</template>
<script setup>
import {  ref, defineAsyncComponent,markRaw,shallowRef } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
import api from '../../api/api.js';
const qyUser = ref({});
//markRaw方法将组件对象标记为非响应式对象
//shallowRef代替ref来创建一个浅响应式对象
const dycomp = shallowRef(null);
const isShow = ref(false);
onLoad(()=>{
	geQyUserInfo();
		
});
const loadAsyncComponent = (componentName)=>{
	console.log(componentName);
	dycomp.value = defineAsyncComponent({
		  loader: () => import("../../components/"+componentName+".vue"),
		  delay: 200,
		  timeout: 3000
		}
	);
	isShow.value = true;
	
}
const geQyUserInfo = ()=>{
		api.geQyUserInfo({
			"qyuserid":uni.getStorageSync("qyuserid"),
		},(res)=>{
				qyUser.value = res.data.qyUser;
				loadAsyncComponent("mdIndex");
		});
}
</script>
<style lang="scss" scoped>
	.main {
		background-color: #f5f6f8;
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20rpx;

		.tops {
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx 20rpx 10rpx;

			.title {
				margin-bottom: 25rpx;
				border-left: 6rpx solid #1296db;
				padding-left: 10rpx;
			}

			.info {

				.item {
					display: flex;
					align-items: center;
					font-size: 26rpx;
					margin-bottom: 10rpx;

					.tit {
						flex: 1;
						color: #666;
					}

					.txt {
						flex: 4;
					}
				}
			}
		}
	}
</style>