Előfordult már, hogy Vue-ban reaktivitásvesztést tapasztaltál?

Igen, tapasztaltam már ezt. A Vue 2-ben a reaktivitás elvesztése főként két esetben fordult elő:

1. Egy meglévő objektumhoz közvetlenül új tulajdonság hozzáadása. A Vue 2 csak az objektum létrehozásakor meglévő tulajdonságokat követi nyomon.
2. Egy tömb index szerinti módosítása vagy hosszának változtatása. A Vue 2 nem tudta közvetlenül reaktívan követni ezeket a változásokat.

Ezeknek a problémáknak a megoldására $set módszereket használtak objektumokhoz és mutáló tömbmetódusokat (push, pop, shift, unshift, splice, sort, reverse) vagy splice alapú módszereket az elemek cseréjére vagy a hossz módosítására.

// Reaktivitás elvesztése tulajdonság hozzáadásakor
const obj = { a: 1 };
// obj.b = 2; // Nem reaktív Vue 2-ben

// Megoldás a `$set`-tel
// Vue.$set(obj, 'b', 2);

// Reaktivitás elvesztése tömb index szerinti módosításakor
const arr = [1, 2, 3];
// arr[0] = 4; // Nem reaktív Vue 2-ben

// Megoldás mutató módszerekkel
// arr.splice(0, 1, 4);

// Megoldás `$set`-tel tömbökre (kevésbé használják, de lehetséges)
// Vue.$set(arr, 0, 4);

Vue 3-ban, a Composition API és a reactive/ref használatával, valamint egy fejlesztett proxy-alapú reaktív motorral, ezek a problémák nagyrészt megoldódnak. A reaktív objektumokhoz tulajdonságokat hozzáadni és a tömböket index vagy hossz szerint módosítani alapértelmezés szerint reaktívvá válik.

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

const obj = reactive({ a: 1 });
obj.b = 2; // Reaktív Vue 3-ban

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Reaktív Vue 3-ban
arr.length = 1; // Reaktív Vue 3-ban

Azonban, a Vue 2-ben a reaktivitás elvesztésének okait megérteni hasznos, különösen örökölt kódok vagy verziók közötti átállás esetén.