Сблъсквали ли сте се някога с загуба на реактивност във 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 е полезно при работа с наследен код или при преход между версии.