defineAsyncComponent function dalam Vue3: pemuatan tak segerak bagi komponen

Vue3 ialah rangka kerja bahagian hadapan yang sangat popular yang membawa idea pembahagian ke dalam pembangunan bahagian hadapan, membolehkan pembangun membina aplikasi yang kompleks dengan lebih pantas dan cekap. Dalam Vue3, kami sering menggunakan komponen untuk membina halaman dan menggunakan sejumlah besar perpustakaan komponen pihak ketiga untuk melanjutkan fungsi kami. Walau bagaimanapun, memuatkan berbilang komponen boleh menyebabkan aplikasi bermula lebih perlahan, itulah sebabnya kami perlu memuatkan komponen secara tidak segerak. Dalam Vue3, fungsi yang dipanggil defineAsyncComponent disediakan, yang boleh membantu kami memuatkan komponen secara tidak segerak untuk meningkatkan prestasi aplikasi.

Apakah itu defineAsyncComponent?

defineAsyncComponent ialah fungsi yang disediakan oleh Vue3, yang digunakan untuk memuatkan komponen secara tidak segerak. Melalui fungsi ini, kita boleh memisahkan import dan pendaftaran komponen untuk mencapai pemuatan tak segerak bagi komponen. Fungsi ini menerima fungsi yang mengembalikan objek Promise sebagai parameter, dan nilai pulangan fungsi itu hendaklah komponen Vue.

Gunakan defineAsyncComponent

Mari kita lihat cara menggunakan fungsi defineAsyncComponent untuk memuatkan komponen secara tidak segerak.

Pertama sekali, apabila kita perlu menggunakan komponen yang dimuatkan secara tak segerak, kita perlu terlebih dahulu menukar pengenalan komponen kepada kaedah tak segerak. Contohnya:

import { defineAsyncComponent } daripada 'vue';

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

eksport lalai {
nama: 'App',
komponen: {

AsyncComponent

},
}

Antaranya, fungsi defineAsyncComponent menerima fungsi yang mengembalikan objek Promise sebagai Parameter, kaedah resolve() bagi objek Promise mengembalikan komponen yang perlu dimuatkan secara tidak segerak.

Apabila menggunakan AsyncComponent, kami tidak perlu lagi melengkapkan pendaftaran komponen ini dalam komponen seperti sebelum ini. Selepas mentakrifkan komponen async, kini kami boleh menggunakannya dalam templat kami seperti mana-mana komponen lain. Contohnya:

d477f9ce7bf77f53fbcf36bec1b69b7a
a73f915f14ced956a8272009e1c240c0
21c97d3a051048b8e55e3c8f199a54b2

Hanya apabila menggunakan AsyncComponent, komponen akan dimuat turun daripada pelayan . Sehingga itu, komponen tidak akan dimuat turun. Ini boleh meningkatkan masa permulaan aplikasi, terutamanya dalam aplikasi yang besar dan kompleks.

Tentukan berbilang komponen tak segerak

Apabila kita perlu menentukan berbilang komponen tak segerak, kita boleh menyimpannya dalam objek. Contohnya:

import { defineAsyncComponent } daripada 'vue';

const asyncComponents = {
AsyncComponent1: defineAsyncComponent(() => import('./AsyncComponent1.vue') ) ,
AsyncComponent2: defineAsyncComponent(() => import('./AsyncComponent2.vue')),
AsyncComponent3: defineAsyncComponent(() => import('./AsyncComponent3.vue'))
};

eksport lalai {
nama: 'App',
komponen: asyncComponent
}

Dengan cara ini, kita boleh menggunakan komponen tak segerak ini di mana-mana sahaja . Contohnya, gunakan dalam templat:

d477f9ce7bf77f53fbcf36bec1b69b7a
746b2b7bc71d2d785eced02a1ba0b3ca
5c945d0b5ab3ac7263437235a5abe396
bcebd5272924e824cf06551468649c9a
a394d787701f854d2b67d49364703bcc

Ringkasan

Fungsi defineAsyncComponent Vue3 memberikan kami cara yang mudah dan cekap untuk memuatkan komponen. Ia membolehkan kami memuatkan komponen secara tidak segerak, sekali gus meningkatkan prestasi aplikasi kami. Kami hanya perlu memisahkan proses menentukan komponen daripada pendaftaran komponen untuk mencapai pemuatan tak segerak komponen. Untuk aplikasi Vue yang besar dan kompleks, memuatkan komponen secara tidak segerak ialah strategi terbaik yang boleh meningkatkan prestasi aplikasi anda dengan ketara.

Atas ialah kandungan terperinci defineAsyncComponent function dalam Vue3: pemuatan tak segerak bagi komponen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!