Rumah > Artikel > hujung hadapan web > Bagaimanakah vue3 menyelesaikan masalah pemuatan berlebihan dalam setiap adegan?
Bagaimanakah vue3 menyelesaikan masalah pemuatan berlebihan dalam setiap adegan?
- WBOYke hadapan
- 2023-05-18 15:25:061828semak imbas
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
64fb6a03fb5631519b8db02f6a431454, iaitu kandungan yang berlebihan
<body>
<div id="app">
<h2>加载中......</h2>
</div>
<script type="module" src="/src/main.js"></script>
</body> 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,
vue3Komponen terbina dalambb06e69d307cb52103d07d8f9dd385e5;bb06e69d307cb52103d07d8f9dd385e5menyediakan slot2A kandungan untuk dimuatkan;: Kandungan yang dimuatkan untuk dipaparkan;
<Suspense> <template #default> <router-view /> </template> <template #fallback> <h2>加载中......</h2> </template> </Suspense>
#defaultKomponen tak segerak juga boleh menggunakan kaedah yang sama Tambah animasi peralihan-
Untuk menambah animasi peralihan, anda perlu terlebih dahulu memahami
dan#fallbackkomponen terbina dalam ????
: Sangat mudah hanya ada satu untuk memaparkan komponen, yang boleh digunakan untuk menukar komponen Sebagai contoh:
<template>
<Suspense>
<template #default>
<AsyncComp v-if = 'vitblie' />
</template>
<template #fallback>
<h2>加载中......</h2>
</template>
</Suspense>
<button @click='open'> 切换 </button>
</template>
<script setup>
import { defineAsyncComponent , ref } from 'vue';
const asyncComp = defineAsyncComponent(()=>important('./asyncComp.vue));
const vitblie = ref(false);
function open(){
vitblie.value = !vitblie.value;
}
</script>: Sisipkan di dalam Kandungan menunjukkan/menyembunyikan
dan menambah animasi peralihan melalui atribut untuk menyambung vue3 seperti: 9366e37985177da7839522e36133b6c8
<template> <Component :is="visible ? TestComp : '' " /> </template>
87a2e53b90599db3250d06933523db3b Tetapkan gaya melalui atribut di sini 9366e37985177da7839522e36133b6c8is
hide=> tunjukkan 87a2e53b90599db3250d06933523db3b masa peralihan dan parameter lain) : keadaan peralihan (set nameshow=> sembunyikan class masa peralihan dan parameter lain)
name =>
Sembunyikan => Tunjukkangaya mula dan akhir
anime-enter-active=> 🎜> Tunjukkan => Sembunyikan
Gaya mula dan tamatanime-leave-activedigabungkan????<template> <transition name='anime'> <TestComp v-if='visblte' /> </transition> </template>
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!