Bagaimanakah vue3 menyelesaikan masalah pemuatan berlebihan dalam setiap adegan?-View.js-php.cn

Bagaimanakah vue3 menyelesaikan masalah pemuatan berlebihan dalam setiap adegan?

WBOY

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

ke hadapan

1802 orang telah melayarinya

Kelebihan biasa dalam vue3

1 Memuatkan apabila halaman pertama kali dibuka

Adalah paling mudah untuk memuatkan kandungan apabila halaman itu dibuka. Mula-mula dibuka. Tambah kandungan dalam index.html melalui direktori akar

fail

<div id='app'>, iaitu kandungan yang berlebihan

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

Salin selepas log masuk

Apabila contoh vue dibuat, lekapkannya pada div .mount() melalui kaedah id='app' , kandungan loading di dalam akan diganti;

2 Apabila penghalaan ditukar, pemuatan komponen tak segerak

perlu difahami. satu perkara dahulu, vue3 Komponen terbina dalam <Suspense>;
<Suspense> menyediakan slot 2 A kandungan untuk dimuatkan;

: Kandungan yang dimuatkan untuk dipaparkan;

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

Salin selepas log masuk

#defaultKomponen tak segerak juga boleh menggunakan kaedah yang sama

Untuk menambah animasi peralihan, anda perlu terlebih dahulu memahami#fallback komponen terbina dalam
dan

: Sangat mudah hanya ada satu untuk memaparkan komponen, yang boleh digunakan untuk menukar komponen Sebagai contoh:

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

Salin selepas log masuk

: Sisipkan di dalam Kandungan

menunjukkan/menyembunyikan

dan menambah animasi peralihan melalui atribut

untuk menyambung vue3 seperti: <Component>

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

Salin selepas log masuk

<Transition> Tetapkan gaya melalui atribut

di sini

<Component>is

: Keadaan peralihan (set

hide=> tunjukkan <Transition> masa peralihan dan parameter lain) : keadaan peralihan (set nameshow=> sembunyikan class masa peralihan dan parameter lain)

name =>

Sembunyikan => Tunjukkan
gaya mula dan akhir anime-enter-active => 🎜> Tunjukkan => Sembunyikan
Gaya mula dan tamat anime-leave-active digabungkan????
 <template>
 	<transition name=&#39;anime&#39;>
 		<TestComp v-if=&#39;visblte&#39; /> 
 	</transition>
 </template>
Salin selepas log masuk
Atas ialah kandungan terperinci Bagaimanakah vue3 menyelesaikan masalah pemuatan berlebihan dalam setiap adegan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!