Ar kada nors susidūrėte su reaktyvumo praradimu Vue?

Taip, susidūriau. Reaktyvumo praradimas Vue 2 dažniausiai pasireikšdavo dviem atvejais:

1. Naujo savybės pridėjimas tiesiogiai prie esamo objekto. Vue 2 stebi pokyčius tik tam tikrose savybėse, kurios buvo objekto kūrimo metu.
2. Masivo modifikavimas pagal indeksą arba jo ilgio keitimas. Vue 2 negalėjo tiesiogiai stebėti tokių pokyčių.

Šiems problemoms spręsti buvo naudojami $set metodai objektams ir mutatoriniai masyvų metodai (push, pop, shift, unshift, splice, sort, reverse) arba splice pagrįsti metodai elementų keitimui/pailginimo keitimui.

// Reaktyvumo praradimas pridedant savybę
const obj = { a: 1 };
// obj.b = 2; // Nereaguoja Vue 2

// Sprendimas su $set
// Vue.$set(obj, 'b', 2);

// Reaktyvumo praradimas keičiant masyvą pagal indeksą
const arr = [1, 2, 3];
// arr[0] = 4; // Nereaguoja Vue 2

// Sprendimas su mutatoriniais metodais
// arr.splice(0, 1, 4);

// Sprendimas su $set masyvams (rečiau naudojama, bet įmanoma)
// Vue.$set(arr, 0, 4);

Vue 3 su Composition API ir reactive/ref, taip pat patobulintu proxy pagrindu veikianti reaktivumo sistema, šias problemas išsprendžia žymiai geriau. Pridėti savybes prie reaktivių objektų ir keisti masyvus pagal indeksą ar jų ilgį tampa reaktiška pagal numatytuosius nustatymus.

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

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

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

Nepaisant to, suprasti priežastis, kodėl prarandama reaktiškumas Vue 2, naudinga dirbant su pasenusiu kodu arba pereinant tarp versijų.