Оё шумо ҳеҷ гоҳ бо талафоти реактивӣ дар 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, инчунин бо муҳаррики реактивии беҳтаршуда, ин мушкилот дар асоси ҳалли умумӣ қарор гирифтаанд. Илова кардани хусусиятҳо ба объектҳои реактивӣ ва тағир додани массивҳо тавассути индекс ё дарозӣ ба таври худкор реактив мешаванд.

// 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 барои кор бо коди меросӣ ё гузариш байни версияҳо муфид аст.