Vue-də reaktivliyin itirilməsi ilə rastlaşdınızmı?

Bəli, mən bu vəziyyətlə qarşılaşmışam. Vue 2-də reaktivliyin itməsi əsasən iki halda baş verirdi:

1. Mövcud obyektə birbaşa yeni xüsusiyyət əlavə etmək. Vue 2 yalnız obyektin yaradıldığı zaman mövcud olan xüsusiyyətlər üçün dəyişiklikləri izləyir.
2. Array-i indekslə dəyişdirmək və ya onun uzunluğunu dəyişdirmək. Vue 2 bu dəyişiklikləri birbaşa reaktiv şəkildə izləyə bilməzdi.

Bu problemləri həll etmək üçün $set metodları obyektlər üçün və mutator array metodları (push, pop, shift, unshift, splice, sort, reverse) və ya splice-ə əsaslanan metodlar istifadə olunurdu, bunlar elementləri dəyişdirmək və ya uzunluğu dəyişdirmək üçün.

// Xüsusiyyət əlavə edərkən reaktivliyin itməsi
const obj = { a: 1 };
// obj.b = 2; // Vue 2-də reaktiv deyil

// $set ilə həll
// Vue.$set(obj, 'b', 2);

// Array-i indekslə dəyişdirmək və ya uzunluğu dəyişdirmək reaktiv deyil
const arr = [1, 2, 3];
// arr[0] = 4; // Vue 2-də reaktiv deyil

// Mutator metodlar ilə həll
// arr.splice(0, 1, 4);

// Array üçün $set ilə həll (daha az istifadə olunur, amma mümkündür)
// Vue.$set(arr, 0, 4);

Vue 3-də, Composition API və reactive/ref istifadə edilərək və təkmilləşdirilmiş proxy əsaslı reaktiv motor ilə, bu problemlər böyük ölçüdə həll olunub. Reaktiv obyektlərə xüsusiyyət əlavə etmək və array-ləri indeks və ya uzunluq ilə dəyişdirmək standart olaraq reaktiv olur.

// Vue 3
import { reactive } from 'vue';

const obj = reactive({ a: 1 });
obj.b = 2; // Vue 3-də reaktiv

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Vue 3-də reaktiv
arr.length = 1; // Vue 3-də reaktiv

Lakin, Vue 2-də reaktivliyin itmə səbəblərini anlamaq, köhnə kod ilə işləmək və ya versiyalar arasında keçid etmək üçün faydalıdır.