Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah vue3 menyelesaikan masalah pemuatan berlebihan dalam setiap adegan?

Bagaimanakah vue3 menyelesaikan masalah pemuatan berlebihan dalam setiap adegan?

WBOY
WBOYke hadapan
2023-05-18 15:25:061846semak 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

    fail

    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, vue3 Komponen terbina dalam bb06e69d307cb52103d07d8f9dd385e5;

    • bb06e69d307cb52103d07d8f9dd385e5 menyediakan slot 2 A 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#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>

    : Sisipkan di dalam Kandungan

    menunjukkan/menyembunyikan

    dan menambah animasi peralihan melalui atribut

    untuk menyambung vue3 seperti: 9366e37985177da7839522e36133b6c8

     <template>
     	<Component :is="visible ? TestComp : &#39;&#39; " /> 
     </template>
    87a2e53b90599db3250d06933523db3b Tetapkan gaya melalui atribut

    di sini

    9366e37985177da7839522e36133b6c8is

    : Keadaan peralihan (set

    hide=> tunjukkan 87a2e53b90599db3250d06933523db3b 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>

    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!

    Kenyataan:
    Artikel ini dikembalikan pada:yisu.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam