Comment vue3 résout-il le problème du chargement excessif dans chaque scène ?-Voir.js-php.cn

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

WBOY

Libérer： 2023-05-18 15:25:06

avant

1871 Les gens l'ont consulté

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文件

在 <div id='app'> 里添加内容，就是过度内容

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

Copier après la connexion

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

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

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

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

Copier après la connexion

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

<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>

Copier après la connexion

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

添加过度动画

添加过度动画需要先了解 vue3 内置组件 <Component> 和 <Transition> ????

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

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

Copier après la connexion

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

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

Copier après la connexion

设置样式通过 name 属性这里

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

anime-enter-from => anime-enter-to 隐藏 => 显示 开始和结束的样式
anime-leave-from => anime-leave-to dans
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>
Copier après la connexion
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 < Suspense> ; 🎜

🎜 <Suspense> 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 <Component> et <Transition> code> ????🎜🎜<Component> : 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!