Async Components in Vue
Katta web ilovalarni dasturlashda, ularning tez yuklanishi va interaktiv elementlarining javob berish tezligi UX ga katta ta'sir ko'rsatishi mumkin. Web-ilovalar o'lchami va murakkabligi ortib borar ekan, katta hajmdagi kodlarni faqat kerak bo'lganda yuklashni ta'minlash muhim ahamiyat kasb etadi. Shu yerda Vue dagi asinxron komponentlar yordamga keladi.
Faraz qiling bizda oddiy modal component bor va parent da button bosilganda shu modal component render bo'lishi kerak.
Modal component o'z ichiga faqat style va modal qanday paydo bo'lishini belgilaydi.
App componentda Button va uni bosganda reactive boolean o'zgaruvchi (showModal) yordamida render bo'lishi kerak bo'lgan Modal component render bo'ladi. Modal shu showModal o'zgaruvchisi orqali ko'rsatiladi/berkitiladi.
When we click the Show Modal button, the modal is shown on the page.Show Modal tugmasi bosilganda sahifada modal paydo bo'ladi.
Ko'rishingiz mumkinki Modal.vue faqat tugmani bosganimizda paydo bo'lsa ham Browser Network loglarida asosiy bundle bilan birga yuklanmoqda.
Ho'sh biz Modal.vue ni faqat tugma bosilgandagina yuklanishini xohlasak, bizga defineAsyncComponent() funksiyasi kerak bo'ladi
Endi App componentda AsyncModal ni import qilib, oddiy Modal ni o'rniga almashtirishimiz kerak.
Endi shu kichik o'zgarish orqali bizning modal asinxron yuklanadi. Sahifamizning boshlang'ich holatida Modal component asosiy bundle bilan yuklanmayotganini ko'rishimiz mumkin.
Show Modal tugmasini bosganimizdan keyingina Modal.vue componenti yuklanmoqda.
Loading va Error UI
Vue bizga defineAsyncComponent() asinxron componentni yuklashdan tashqari ushbu component yuklanish vaqtidagi loading protsessini va yuzaga kelgan xatolik haqida ma'lumotni ko'rsatish imkonini beradi. Bu esa bizga o'z navbatida internetning har qanday holatida ham silliq UX ni ta'minlashga yordam beradi.
loadingComponent
Tepadagi tugmani bosgan paytda Modal.vue yuklangunicha bo'lgan vaqtda UI da uzilish bo'lmasligi uchun defineAsyncComponent() bizga qo'shimcha loadingComponent optionini ham beradi. Undan foydalanishimiz uchun biz defineAsyncComponent ga import funksiyasini emas, object beramiz va import funksiyani loader option iga qo'yamiz:
Bizda oddiy Loading component bor:
Biz uni loadingComponent optioniga beramiz
Loading ni ko'rish uchun Network da internet tezligini Slow 3G ga o'tkazib sekin internet holatini sun'iy ko'rinishda yuzaga keltiramiz (Bo'lmasam Loading... chiqishini ko'rishni iloji yo'q).
Browser Modal.vue ni yuklab bo'lgach uni Loading component bilan almashtiradi.
errorComponent
Huddi loadingComponent kabi defineAsyncComponent() bizga errorComponent optionini beradi. Keling oddiy Error.vue componentini yasaymiz:
Endi uni errorComponent optioniga beramiz
Error component ni ko'rish uchun browser ni Network tabida internet ni Offline qilish kerak bo'ladi.
defineAsyncComponent() yana bir qancha optionlar ni taqdim etadi: delay, timeout, suspensible va onError(). Bu optionlar dasturchiga componentni asinxron yuklash va UX ni kontrol qilishda ko'p imkoniyatlarni beradi. Ko'proq detallar haqida API documentation ga murojaat qilishingizni so'rayman.
Darsligimiz yoqdi degan umiddamiz. https://t.me/peaceofcode ni kuzatib boring, yanada ko'proq mavzularni O'zbek tilida yoritib borishga harakat qilamiz. 🫰