Vue ilə işləyən hər bir tərtibatçının başını qarışdıran bəzi məqamlar var — elə konseptlər ki, sənəddə qısaca yazılsa da, real layihədə ortaya çıxanda çaşqınlıq yaradır. Bu dərslikdə həmin 5 sirri — timer drift, shallowRef, onScopeDispose, hydration uyğunsuzluğu və failSilently — sadə dillə, işlək nümunələrlə açıqlayırıq.
1. Timer drift: saat niyə geri qalır?
Təsəvvür edin ki, hər 60 saniyədən bir işə düşən alarm qurmusunuz. setInterval ilə işləyən belə bir timer vaxt keçdikcə sürüşməyə başlayır — buna "drift" deyilir. Səbəb sadədir: JavaScript tək thread'də işləyir və hər callback gecikə bilər. İlk bir neçə dəfə 1–2 millisaniyəlik gecikmə əhəmiyyətsiz görünsə də, saatlar sonra saniyələrlə fərq yaranır.
Həlli: recursive setTimeout — hər dəfə callback işə düşəndə növbəti tick'in vaxtını real saatdan (wall-clock) hesablamaq. Bu üsul sürüşməni hər dövrədə düzəldir və intervalı dəqiq saxlayır. Analoji olaraq: setInterval yalnız addımlarını sayan qaçışçı kimidirsə, recursive setTimeout hər addımdan əvvəl saatına baxan qaçışçı kimidir.
2. shallowRef vs ref: dərin reaktivlik həmişə lazım deyil
ref içinə obyekt qoyduqda Vue hər xassəni ayrıca reaktiv edir. Lakin bəzi obyektlər immutable olur — məsələn, Temporal.PlainTime dəyəri. Belə hallarda shallowRef daha yüngül işləyir: yalnız .value-nin dəyişməsini izləyir, içəri girmir. Nəticə: performans qazanırsınız, çünki hər dəfə bütöv obyekti əvəz edirsiniz, xassələri ayrıca dəyişmirsiniz.
3. onScopeDispose: təmizlik işləri üçün daha universal vasitə
Komponent silinəndə timer və event listener-ləri təmizləmək üçün onUnmounted istifadə olunur. Bəs bu composable başqa yerdə — məsələn Pinia store'da — işlədikdə? Vue 3.2'dən etibarən onScopeDispose bu boşluğu doldurur. O, aktiv effekt scope-unun silinməsinə callback bağlayır. Komponent daxilində onUnmounted ilə eyni işi görsə də, həm də Pinia store-larında və manual scopes'da işləyir. Yəni "binanın sökülməsini" deyil, "otağın sökülməsini" izləyir.
4. Hydration uyğunsuzluğu: server və klient eyni vaxtı göstərmir
Nuxt kimi SSR framework-lərində server HTML-i bir anda render edir, brauzer isə onu "dirildir" (hydration). Əgər komponent serverdə 14:32:01'də render olunubsa, klient bunu 14:32:03'də götürə bilər. Nəticədə saatlar uyğunsuz görünür. Həlli: ən təmiz üsul — serverdə placeholder göstərib saatı yalnız klientdə işə salmaq. Nuxt'ın <ClientOnly> və <NuxtTime> komponentləri bu işi asanlaşdırır.
5. failSilently: xəbərdarlığı susdurmaq, amma təmizliyi unutmamaq
onScopeDispose heç bir aktiv scope olmayanda xəbərdarlıq verir. Bəzən isə siz komponentdən kənarda — məsələn global utilitdə — bu funksiyanı çağırmaq istəyirsiniz. failSilently = true parametri xəbərdarlığı gizlədir, lakin təmizlik yaratmır. Onu gizlətməklə yanaşı, əlinizdə stop() metodu da olmalıdır ki, lazım gələndə scope'u əl ilə bağlaya biləsiniz.
Bu 5 konsepti mənimsəmək Vue layihələrində tez-tez rast gəlinən səhvlərin qarşısını alar və kodunuzu daha stabil edər. Unutmayın: hər bir sirrin arxasında sadə bir izahat var.
Mənbə: Dev.to (https://dev.to/kickbuttowski80/the-case-of-the-lying-clock-5-vue-mysteries-solved-1e99)
