Kas oled kunagi kokku puutunud Vue-s reaktiivsuse kaotusega?

Jah, ma olen sellega kokku puutunud. Vue 2 reaktiivsuse kadumine tekkis peamiselt kahel juhul:

1. Uue omaduse otse olemasolevale objekti lisamine. Vue 2 jälgib muutusi ainult nende omaduste puhul, mis olid objekti loomise ajal olemas.
2. Massiivi muutmine indeksi järgi või selle pikkuse muutmine. Vue 2 ei suutnud selliseid muutusi otse jälgida.

Nende probleemide lahendamiseks kasutati $set meetodeid objektidele ja mutator-meetodeid massiividele (push, pop, shift, unshift, splice, sort, reverse) või splice põhiseid meetodeid elementide asendamiseks/pikkuse muutmiseks.

// Reaktiivsuse kadumine omaduse lisamisel
const obj = { a: 1 };
// obj.b = 2; // Ei ole reaktiivne Vue 2

// Lahendus `$set`-iga
// Vue.$set(obj, 'b', 2);

// Reaktiivsuse kadumine massiivi muutmisel indeksi järgi
const arr = [1, 2, 3];
// arr[0] = 4; // Ei ole reaktiivne Vue 2

// Lahendus mutator-meetoditega
// arr.splice(0, 1, 4);

// Lahendus `$set`-iga massiividele (harvem kasutatav, aga võimalik)
// Vue.$set(arr, 0, 4);

Vue 3 koos Composition API ja reactive/ref-i ning täiustatud proxy-põhise reaktiivse mootoriga lahendab need probleemid oluliselt paremini. Omaduste lisamine reaktiivsetele objektidele ning massiivide muutmine indeksi või pikkuse järgi muutub vaikimisi reaktiivseks.

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

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

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

Kuid on kasulik mõista, miks Vue 2 kaotab reaktiivsuse, töötades vananenud koodiga või versioonide vahel üle minnes.