Müəllif: Publisist.az /Tarix: 2024-12-05 /Oxunma Sayı: 276

Vue js 3-cü versiya. Composition API-nin Ətraflı Araşdırılması

Vue 3.x-ın əhatəli yeniləməsi Composition API-nin təqdim olunması ilə Options API-dən daha çevik və modul əsaslı kod strukturu təmin edir.

Composition API-nin əsas anlayışları və funksiyaları

setup() funksiyası:

Vue 3-də komponentin vəziyyəti və məntiqini təyin etmək üçün istifadə edilən əsas giriş nöqtəsidir. beforeCreate və create hook-ları arasında icra olunur. data və methods kimi əvvəlki seçimləri əvəz edir.

ref və reactive:

Reaktiv məlumat yaratmaq üçün istifadə olunur. ref əsas tiplər üçün, reactive isə obyektlər və massivlər üçün nəzərdə tutulmuşdur.

Hesablanan xassələr və dinləyicilər:

computed: Yalnız asılılıqlar dəyişdikdə yenidən hesablanır.
watch: Reaktiv məlumatların dəyişikliklərini izləyir və geri çağırma funksiyasını işə salır.

Kompozisiya funksiyaları:

Təkrar istifadə edilə bilən məntiq yaratmağa imkan verir.

Lifecycle hook-ları:

setup() daxilində yeni hook funksiyaları ilə istifadə olunur.

onBeforeMount: Komponent DOM-a yerləşdirilməzdən əvvəl çağırılır.
onMounted: Komponent DOM-a yerləşdirildikdən sonra çağırılır.
onBeforeUpdate: Məlumat yenilənmədən əvvəl çağırılır.
onUpdated: DOM yenilənməsi tamamlandıqdan sonra çağırılır.
onBeforeUnmount: Komponent ləğv olunmadan əvvəl çağırılır.
onUnmounted: Komponent ləğv edildikdən sonra çağırılır.
onActivated və onDeactivated: Yalnız <keep-alive> daxilində istifadə olunan komponentlər üçün aktiv/deaktiv vəziyyətlərini izləyir.

Options API-dən Composition API-yə keçid:

Məlumat, metod və məntiq ayrı-ayrı funksiyalara bölünür.
provide və inject ilə asılılıq ötürülməsi Composition API-də dəstəklənir.

Composition API, kodun daha çevik və modullu olmasına imkan verərək Vue tətbiqlərinin genişlənməsini və saxlanmasını asanlaşdırır.

Mənbə : Tianya School