V-ați confruntat vreodată cu pierderea reactivității în Vue?

Da, am avut această experiență. Pierderea reactivității în Vue 2 apărea în principal în două cazuri:

1. Adăugarea unei noi proprietăți direct la un obiect existent. Vue 2 urmărește modificările doar pentru proprietățile care au fost prezente în obiect la momentul creării sale.
2. Modificarea unui array prin index sau schimbarea lungimii sale. Vue 2 nu putea urmări reacțiv aceste modificări direct.

Pentru a rezolva aceste probleme, se foloseau metode $set pentru obiecte și metode mutatoare pentru array-uri (push, pop, shift, unshift, splice, sort, reverse) sau metode bazate pe splice pentru înlocuirea elementelor/schimbarea lungimii.

// Pierderea reactivității la adăugarea unei proprietăți
const obj = { a: 1 };
// obj.b = 2; // Nu reactiv în Vue 2

// Soluție cu $set
// Vue.$set(obj, 'b', 2);

// Pierderea reactivității la modificarea unui array prin index
const arr = [1, 2, 3];
// arr[0] = 4; // Nu reactiv în Vue 2

// Soluție cu metode mutatoare
// arr.splice(0, 1, 4);

// Soluție cu $set pentru array-uri (mai rar folosit, dar posibil)
// Vue.$set(arr, 0, 4);

În Vue 3, folosind Composition API și reactive/ref, precum și un motor reactiv bazat pe proxy îmbunătățit, aceste probleme sunt în mare parte rezolvate. Adăugarea de proprietăți la obiecte reactive și modificarea array-urilor după index sau lungime devin reactive implicit.

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

const obj = reactive({ a: 1 });
obj.b = 2; // Reactiv în Vue 3

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Reactiv în Vue 3
arr.length = 1; // Reactiv în Vue 3

Cu toate acestea, înțelegerea cauzelor pierderii reactivității în Vue 2 este utilă atunci când se lucrează cu cod moștenit sau în timpul tranziției între versiuni.