Maison >interface Web >Voir.js >Comment vue3 résout-il le problème du chargement excessif dans chaque scène ?

Comment vue3 résout-il le problème du chargement excessif dans chaque scène ?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBavant: 2023-05-18 15:25:061921parcourir

vue3 Commun Excessif

1. Chargement lorsque la page est ouverte pour la première fois

Il est plus simple de charger le contenu lorsque la page est ouverte pour la première fois, via le répertoire racine index. html index.html文件

在 64fb6a03fb5631519b8db02f6a431454 里添加内容，就是过度内容

<body>
   <div id="app">
      <h2>加载中......</h2>
   </div>
   <script type="module" src="/src/main.js"></script>
</body>

当vue实例创建完成，通过.mount() 方法挂载到 id='app' 的div 里，会替换掉里的loading内容；

2、路由切换时、异步组件 loading

路由切换过度需要先了解一个，vue3 的内置组件 bb06e69d307cb52103d07d8f9dd385e5；
bb06e69d307cb52103d07d8f9dd385e5 提供 2 个插槽 ????；
#default : 一个要加载的内容；
#fallback: 一个加载种显示的内容；

<Suspense>
	<template #default>
		<router-view />
	</template>
	<template #fallback>
		<h2>加载中......</h2>
	</template>
</Suspense>

同理：( 异步组件的切换 )

<template>
	<Suspense>
		<template #default>
			<AsyncComp  v-if = &#39;vitblie&#39; />
		</template>
		<template #fallback>
			<h2>加载中......</h2>
		</template>
	</Suspense>
	
	<button @click=&#39;open&#39;> 切换 </button>
</template>
<script setup>
	import { defineAsyncComponent , ref } from &#39;vue&#39;;
	const asyncComp = defineAsyncComponent(()=>important(&#39;./asyncComp.vue));

	const vitblie = ref(false);
	function open(){
		vitblie.value = !vitblie.value;
	}
</script>

异步组件也是可以使用相同的方法

添加过度动画

添加过度动画需要先了解 vue3 内置组件 9366e37985177da7839522e36133b6c8 和 87a2e53b90599db3250d06933523db3b ????

9366e37985177da7839522e36133b6c8: 非常简单只有一个 is 显示该组件，可以用来组件切换如：

 <template>
 	<Component :is="visible ? TestComp : &#39;&#39; " /> 
 </template>

87a2e53b90599db3250d06933523db3b : 里插入的内容 显示/隐藏 添加过度动画，通过 name 属性来拼接 class 如 :

 <template>
 	<transition name=&#39;anime&#39;>
 		<TestComp v-if=&#39;visblte&#39; /> 
 	</transition>
 </template>

设置样式通过 name 属性这里

anime-enter-active: 过度态 ( 设置 隐藏 => 显示 过度的时间等参数)
anime-leave-active: 过度态 ( 设置 显示 => 隐藏 过度的时间等参数)

anime-enter-from => anime-enter-to 隐藏 => 显示 开始和结束的样式
anime-leave-from => anime-leave-to dans 43385b86c17e4e8e6ef603bd5efdffc9 est un contenu excessif
<template>
	<router-view v-slot={ Component } >
		<transition name=&#39;anime&#39;>
			<component :is="Component" />
		<transition>
	</router-view>
<template>
<style scoped>
.anime-enter-active,
.anime-leave-active {
	transition: all 1s;
}
.anime-leave-from { transform: translateY(0); }
.anime-leave-to { transform: translateY(-100%); }

.anime-enter-from { transform: translateY(100%); }
.anime-enter-to { transform: translate(0); }
</style>
Lorsque l'instance de vue est créée, montez-la sur .mount() Dans le div avec >id='app', le contenu loading sera remplacé

2. chargement des composants

🎜Pour changer de manière excessive, vous devez d'abord comprendre une chose, le composant intégré de vue3 b7d391b0a8e9eea5e525c473b7ead7d2 ; 🎜
🎜 bb06e69d307cb52103d07d8f9dd385e5 fournit 2 emplacements ???? ; 🎜#default : un contenu à charger ; 🎜
🎜#fallback : Contenu affiché par une espèce en cours de chargement ; 🎜🎜De même : (commutation de composants asynchrones)🎜🎜rrreee🎜Composants asynchrones Vous pouvez également utiliser la même méthode🎜🎜Ajouter une animation de transition🎜🎜Pour ajouter une animation de transition, vous devez d'abord comprendre vue3 construit- dans les composants 9366e37985177da7839522e36133b6c8 et 87a2e53b90599db3250d06933523db3b code> ????🎜🎜<code>9366e37985177da7839522e36133b6c8 : Très simple, un seul is affiche le composant, qui peut être utilisé pour changer de composant, tel que : 🎜rrreee🎜&lt ;Transition> : le contenu inséré dans 🎜Afficher/masquer🎜 Ajouter une animation de transition et une épissure class via l'attribut name Par exemple : 🎜rrreee🎜Définissez le style via l'attribut name ici 🎜
🎜anime-. enter-active : état de transition (définir 🎜hide=> afficher le temps de transition et d'autres paramètres)
anime-leave-active : état de transition (définir 🎜display=> ; masquer🎜 le temps de transition et d'autres paramètres)

anime-enter-from => ; anime-enter-to 🎜Hide=> 🎜 styles de début et de fin
anime-leave-from => anime-leave -to 🎜Afficher => Masquer 🎜 Styles de début et de fin 🎜🎜🎜 combinés ????🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html class default 异步 transition

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Quelle est la méthode pour encapsuler axios et utiliser mock.js avec vue3 et ts ?Article suivant：Quelle est la méthode pour encapsuler axios et utiliser mock.js avec vue3 et ts ?

Articles Liés

Voir plus