Vue-деги реактивтүүлүктүн жоголушу менен кезиккенсизби?

Ооба, мен мындай менен тааныш болчумун. Vue 2де реактивтүүлүктүн жоголушу негизинен эки учурда болмок:

1. Ичке объектке түздөн-түз жаңы мүнөздөмө кошуу. Vue 2 өзгөрүүлөрдү объект түзүлгөндө бар болгон мүнөздөмөлөр үчүн гана көзөмөлдөйт.
2. Массивди индекс боюнча өзгөртүү же анын узундугун өзгөртүү. Vue 2 мындай өзгөрүүлөрдү түздөн-түз реактивдүү көзөмөлдөй алган эмес.

Бул көйгөйлөрдү чечүү үчүн $set ыкмалары жана массивдер үчүн мутатор ыкмалары (push, pop, shift, unshift, splice, sort, reverse) же splice негизделген ыкмалар колдонулчу, алар элементтерди алмаштыруу же узундугун өзгөртүү үчүн.

// Өзгөртүү кошууда реактивтүүлүктүн жоголушу
const obj = { a: 1 };
// obj.b = 2; // Vue 2де реактив эмес

// `$set` менен чечим
// Vue.$set(obj, 'b', 2);

// Масивди индекс боюнча өзгөртүүдө реактивтүүлүктүн жоголушу
const arr = [1, 2, 3];
// arr[0] = 4; // Vue 2де реактив эмес

// Мутатор ыкмалар менен чечим
// arr.splice(0, 1, 4);

// `$set` менен массивдер үчүн чечим (аз колдонулат, бирок мүмкүн)
// Vue.$set(arr, 0, 4);

Vue 3та, Composition API жана reactive/ref колдонуу менен, ошондой эле өркүндөтүлгөн proxy негизделген реактивдүү кыймылдаткыч менен, бул көйгөйлөр негизинен чечилген. Реактивдүү объекттерге мүнөздөмөлөр кошуу жана массивдерди индекс же узундук боюнча өзгөртүү автоматтык түрдө реактивдүү болот.

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

const obj = reactive({ a: 1 });
obj.b = 2; // Vue 3та реактив

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Vue 3та реактив
arr.length = 1; // Vue 3та реактив

Бирок, Vue 2да реактивтүүлүктүн жоголушунун себептерин түшүнүү пайдалуу — өзгөчө мурас код менен иштөөдө же версиялар арасына өтүүдө.