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:

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: