Ciri Suspense dan malas memuatkan dalam Vue 3 meningkatkan pengalaman pengguna aplikasi

Ciri-ciri Suspense dan malas memuatkan dalam Vue 3 meningkatkan pengalaman pengguna aplikasi

Pengenalan:
Dalam aplikasi web moden, adalah sangat penting untuk memuatkan halaman dengan cepat dan memberikan pengalaman pengguna yang baik. Dalam Vue 3, ciri Suspense dan malas memuatkan boleh membantu pembangun meningkatkan prestasi aplikasi dan pengalaman pengguna dengan berkesan. Artikel ini akan memperkenalkan penggunaan Suspense dan pemuatan malas dalam Vue 3, dan menyediakan contoh kod untuk membantu pembaca memahami dan menggunakan ciri ini dengan lebih baik.

1. Ciri Suspens:
Suspense ialah ciri baharu dalam Vue 3, yang digunakan untuk mengendalikan keadaan menunggu apabila komponen tak segerak dimuatkan. Ia membolehkan pembangun memaparkan penunjuk pemuatan tersuai semasa pemuatan komponen. Melalui ciri Suspense, pembangun boleh mengawal proses pemaparan komponen dengan lebih baik dan meningkatkan pengalaman pengguna.

1. Penggunaan asas:

   <template>
     <Suspense>
    <template #default>
      <AsyncComponent/>
    </template>
    <template #fallback>
      <Loading/>
    </template>
     </Suspense>
   </template>
   
   <script>
   import { Suspense } from 'vue'
   import AsyncComponent from './AsyncComponent.vue'
   import Loading from './Loading.vue'
   
   export default {
     components: {
    AsyncComponent,
    Loading
     }
   }
   </script>

   Dalam kod di atas, kami membalut komponen asynchronous AsyncComponent dalam komponen Suspen dengan menggunakan ciri Suspense. Apabila AsyncComponent sedang dimuatkan, kandungan dalam templat sandaran (iaitu Memuatkan komponen) akan dipaparkan sehingga AsyncComponent dimuatkan. Dengan cara ini, pengguna boleh melihat penunjuk pemuatan yang mesra semasa proses pemuatan.

2. Konfigurasikan masa tunda:

   <template>
     <Suspense :delay="200">
    <template #default>
      <AsyncComponent/>
    </template>
    <template #fallback>
      <Loading/>
    </template>
     </Suspense>
   </template>

   Dalam kod di atas, kami menentukan masa tunda 200 milisaat untuk komponen Suspen melalui atribut :delay. Dengan cara ini, walaupun komponen dimuatkan dengan cepat, kandungan dalam templat sandaran akan dipaparkan sebelum pemuatan selesai. Tujuannya adalah untuk memberi pengguna pengalaman memuatkan yang lebih baik, dan bukannya kilat arahan memuatkan.

2. Ciri pemuatan malas:
Pemuatan malas merujuk kepada memuatkan kod komponen atau laluan hanya apabila diperlukan. Ini boleh mengurangkan jumlah kod yang dimuatkan pada mulanya dan meningkatkan prestasi aplikasi.

1. Penggunaan asas:

   const AsyncComponent = () => import('./AsyncComponent.vue')

   Dalam kod di atas, dengan menggunakan fungsi import dan lulus dalam laluan komponen tak segerak, kita boleh memuatkan kod komponen secara tak segerak. Dengan cara ini, bahagian kod ini tidak akan dimuatkan semasa pemaparan awal, tetapi hanya akan dimuatkan apabila komponen digunakan.

2. Route lazy loading:

   const routes = [
     {
    path: '/',
    name: 'Home',
    component: () => import('./Home.vue')
     },
     {
    path: '/about',
    name: 'About',
    component: () => import('./About.vue')
     }
   ]

   Dalam kod di atas, kami menggunakan fungsi import untuk memuatkan kod komponen secara tidak segerak ke laluan yang sepadan. Dengan cara ini, komponen akan dimuatkan hanya apabila pengguna menyemak imbas ke laluan, dengan itu meningkatkan kelajuan pemuatan awal dan prestasi aplikasi.

Kesimpulan:
Ciri Suspense dan malas memuatkan dalam Vue 3 menyediakan pembangun cara yang mudah untuk meningkatkan pengalaman pengguna aplikasi. Dengan menggunakan ciri Suspense, kami boleh memaparkan arahan pemuatan tersuai semasa proses pemuatan komponen tak segerak untuk memberikan pengguna pengalaman pemuatan yang lebih baik. Menggunakan ciri pemuatan malas, kod komponen boleh dimuatkan hanya apabila diperlukan, mengurangkan jumlah kod yang dimuatkan pada mulanya dan meningkatkan prestasi aplikasi. Saya harap artikel ini dapat membantu pembaca memahami dan menggunakan ciri ini dengan lebih baik dalam Vue 3.

Atas ialah kandungan terperinci Ciri Suspense dan malas memuatkan dalam Vue 3 meningkatkan pengalaman pengguna aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!