Stretli ste sa niekedy so stratou reaktivity vo Vue?

Áno, stretol som sa tým. Strata reaktivity vo Vue 2 sa vyskytovala hlavne v dvoch prípadoch:

1. Priamym pridávaním novej vlastnosti k existujúcemu objektu. Vue 2 sleduje zmeny iba pre vlastnosti, ktoré boli prítomné v objekte v čase jeho vytvorenia.
2. Modifikáciou poľa podľa indexu alebo zmenou jeho dĺžky. Vue 2 nedokázalo takéto zmeny sledovať reaktívne priamo.

Na riešenie týchto problémov sa používali metódy $set pre objekty a mutačné metódy poľa (push, pop, shift, unshift, splice, sort, reverse) alebo metódy založené na splice na nahradenie prvkov/zmenu dĺžky.

// Strata reaktivity pri pridávaní vlastnosti
const obj = { a: 1 };
// obj.b = 2; // Nie je reaktívne vo Vue 2

// Riešenie s `$set`
// Vue.$set(obj, 'b', 2);

// Strata reaktivity pri zmene poľa podľa indexu
const arr = [1, 2, 3];
// arr[0] = 4; // Nie je reaktívne vo Vue 2

// Riešenie s mutačnými metódami
// arr.splice(0, 1, 4);

// Riešenie s `$set` pre polia (menej používané, ale možné)
// Vue.$set(arr, 0, 4);

Vo Vue 3, s použitím Composition API a reactive/ref, ako aj s vylepšeným proxy-bázovaným reaktívnym motorom, sú tieto problémy do značnej miery vyriešené. Pridávanie vlastností k reaktívnym objektom a zmena polí podľa indexu alebo dĺžky sa stávajú predvolene reaktívne.

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

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

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

Napriek tomu je užitočné pochopiť príčiny straty reaktivity vo Vue 2, najmä pri práci so starým kódom alebo pri prechode medzi verziami.