简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Wie vue3 das Problem der übermäßigen Belastung in jeder Szene löst

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

WBOY
WBOYnach vorne
2023-05-18 15:25:061832Durchsuche

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

    在 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 in 43385b86c17e4e8e6ef603bd5efdffc9 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>

    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 b7d391b0a8e9eea5e525c473b7ead7d2; 🎜
    • 🎜 bb06e69d307cb52103d07d8f9dd385e5 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 9366e37985177da7839522e36133b6c8 und 87a2e53b90599db3250d06933523db3b code> ????🎜🎜<code>9366e37985177da7839522e36133b6c8: 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!

    html class default 异步 transition
    Stellungnahme：
    Dieser Artikel ist reproduziert unter:yisu.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
    Vorheriger Artikel：Was ist die Methode, Axios zu kapseln und Mock.js mit vue3 und ts zu verwenden?Nächster Artikel：Was ist die Methode, Axios zu kapseln und Mock.js mit vue3 und ts zu verwenden?

    In Verbindung stehende Artikel

    Mehr sehen