Vue'da reaktivlik kaybıyla karşılaştınız mı?

Evet, bu durumu yaşadım. Vue 2'de reaktivitenin kaybolması genellikle iki durumda olur:

1. Mevcut bir nesneye doğrudan yeni bir özellik eklemek. Vue 2, yalnızca nesne oluşturulurken var olan özelliklerde değişiklikleri izler.
2. Bir diziyi indeksle değiştirmek veya uzunluğunu değiştirmek. Vue 2, bu değişiklikleri doğrudan reaktif olarak izleyemez.

Bu sorunları çözmek için $set metodları nesneler için ve mutator array metodları (push, pop, shift, unshift, splice, sort, reverse) veya splice tabanlı metodlar kullanılırdı, bunlar öğeleri değiştirmek veya uzunluğu değiştirmek için kullanılırdı.

// Özellik eklerken reaktivitenin kaybı
const obj = { a: 1 };
// obj.b = 2; // Vue 2'de reaktif değil

// $set ile çözüm
// Vue.$set(obj, 'b', 2);

// Dizi indeksle değişiklikte reaktivitenin kaybı
const arr = [1, 2, 3];
// arr[0] = 4; // Vue 2'de reaktif değil

// Mutator metodlar ile çözüm
// arr.splice(0, 1, 4);

// Dizi için $set ile çözüm (daha az kullanılır ama mümkündür)
// Vue.$set(arr, 0, 4);

Vue 3'te, Composition API ve reactive/ref kullanımıyla, ayrıca geliştirilmiş proxy tabanlı reaktif motor sayesinde bu sorunlar büyük ölçüde çözülmüştür. Reaktif nesnelere özellik ekleme ve dizileri indeks veya uzunlukla değiştirme varsayılan olarak reaktiftir.

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

const obj = reactive({ a: 1 });
obj.b = 2; // Vue 3'te reaktif

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Vue 3'te reaktif
arr.length = 1; // Vue 3'te reaktif

Ancak, Vue 2'deki reaktivite kaybının nedenlerini anlamak, eski kodla çalışırken veya sürüm geçişlerinde faydalıdır.