Wie vue3 das Problem der übermäßigen Belastung in jeder Szene löst-View.js-php.cn

Wie vue3 das Problem der übermäßigen Belastung in jeder Szene löst

WBOY

Freigeben： 2023-05-18 15:25:06

nach vorne

1781 Leute haben es durchsucht

vue3 Common Excess

1. Wird geladen, wenn die Seite zum ersten Mal geöffnet wird

Es ist am einfachsten, den Inhalt über das Stammverzeichnis index zu laden, wenn die Seite zum ersten Mal geöffnet wird. html-Datei index.html文件

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

添加过度动画

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

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

设置样式通过 name 属性这里

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

anime-enter-from => anime-enter-to 隐藏 => 显示 开始和结束的样式
anime-leave-from => anime-leave-to in
ist übermäßiger Inhalt
<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>
Nach dem Login kopieren
Wenn die Vue-Instanz erstellt wird, mounten Sie sie über den .mount()-Methode Im div mit >id='app' wird der loading-Inhalt ersetzt
2 Beim Umschalten des Routings Laden von Komponenten

🎜Um übermäßig zu wechseln, müssen Sie zunächst eines verstehen: Die integrierte Komponente von vue3 < Suspense>; 🎜

🎜 <Suspense> bietet 2 Slots????; 🎜#default: ein zu ladender Inhalt; 🎜

🎜#fallback: Von einer Ladeart angezeigter Inhalt 🎜
🎜rrreee 🎜🎜Ähnlich: (Umschalten asynchroner Komponenten)🎜🎜rrreee🎜Asynchrone Komponenten Sie können auch die gleiche Methode verwenden🎜🎜Übergangsanimation hinzufügen🎜🎜Um eine Übergangsanimation hinzuzufügen, müssen Sie zunächst den Aufbau von vue3 verstehen. in den Komponenten <Component> und <Transition> code> ????🎜🎜<Component>: Sehr einfach, nur ein is zeigt die Komponente an, die zum Wechseln von Komponenten verwendet werden kann, wie zum Beispiel: 🎜rrreee🎜&lt ;Übergang>: Der in 🎜Anzeigen/Ausblenden🎜 eingefügte Inhalt. Übergangsanimation hinzufügen und verbinden class durch das Attribut name Zum Beispiel: 🎜rrreee🎜Legen Sie hier den Stil durch das Attribut name fest 🎜🎜anime- enter-active: Übergangszustand (Set 🎜hide=> Anzeige 🎜 Übergangszeit und andere Parameter) anime-leave-active: Übergangszustand (Set 🎜display=> ; hide🎜 Übergangszeit und andere Parameter) anime-enter-from => ; anime-enter-to 🎜Hide=> 🎜 Start- und Endstile anime-leave-from => anime-leave -to 🎜Show => Ausblenden 🎜 Start- und Endstile 🎜🎜🎜 kombiniert ????🎜rrreee
Das obige ist der detaillierte Inhalt vonWie vue3 das Problem der übermäßigen Belastung in jeder Szene löst. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!