Czy kiedykolwiek doświadczyłeś utraty reaktywności w Vue?

Tak, miałem z tym do czynienia. Utrata reaktywności w Vue 2 występowała głównie w dwóch przypadkach:

1. Dodanie nowej właściwości bezpośrednio do istniejącego obiektu. Vue 2 śledzi zmiany tylko dla właściwości, które były obecne w obiekcie w momencie jego tworzenia.
2. Modyfikacja tablicy przez indeks lub zmiana jej długości. Vue 2 nie mógł śledzić takich zmian reaktywnie bezpośrednio.

Aby rozwiązać te problemy, używano metod $set dla obiektów i mutatorów tablic (push, pop, shift, unshift, splice, sort, reverse) lub metod opartych na splice do zamiany elementów/zmiany długości.

// Utrata reaktywności przy dodawaniu właściwości
const obj = { a: 1 };
// obj.b = 2; // Niereaktywne w Vue 2

// Rozwiązanie z $set
// Vue.$set(obj, 'b', 2);

// Utrata reaktywności przy zmianie tablicy przez indeks
const arr = [1, 2, 3];
// arr[0] = 4; // Niereaktywne w Vue 2

// Rozwiązanie z metodami mutującymi
// arr.splice(0, 1, 4);

// Rozwiązanie z $set dla tablic (rzadziej używane, ale możliwe)
// Vue.$set(arr, 0, 4);

W Vue 3, korzystając z Composition API i reactive/ref, oraz z ulepszonego silnika opartego na proxy, te problemy są w dużej mierze rozwiązane. Dodawanie właściwości do obiektów reaktywnych i modyfikacja tablic przez indeks lub długość stają się domyślnie reaktywne.

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

const obj = reactive({ a: 1 });
obj.b = 2; // Reaktywne w Vue 3

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Reaktywne w Vue 3
arr.length = 1; // Reaktywne w Vue 3

Niemniej jednak, zrozumienie przyczyn utraty reaktywności w Vue 2 jest przydatne podczas pracy z kodem dziedziczonym lub przy przejściu między wersjami.