Setkali jste se někdy se ztrátou reaktivity ve Vue?

Ano, zažil jsem to. Ztráta reaktivity ve Vue 2 se vyskytovala hlavně ve dvou případech:

1. Přidání nové vlastnosti přímo k existujícímu objektu. Vue 2 sleduje změny pouze u vlastností, které byly přítomny v objektu v době jeho vytvoření.
2. Úprava pole podle indexu nebo změna jeho délky. Vue 2 nemohl takové změny sledovat reaktivně přímo.

Pro řešení těchto problémů se používaly metody $set pro objekty a mutační metody pole (push, pop, shift, unshift, splice, sort, reverse) nebo metody založené na splice pro nahrazení prvků/změnu délky.

// Ztráta reaktivity při přidání vlastnosti
const obj = { a: 1 };
// obj.b = 2; // Nereaktivní ve Vue 2

// Řešení s `$set`
// Vue.$set(obj, 'b', 2);

// Ztráta reaktivity při změně pole podle indexu
const arr = [1, 2, 3];
// arr[0] = 4; // Nereaktivní ve Vue 2

// Řešení s mutačními metodami
// arr.splice(0, 1, 4);

// Řešení s `$set` pro pole (méně používané, ale možné)
// Vue.$set(arr, 0, 4);

V Vue 3, s použitím Composition API a reactive/ref, a také s vylepšeným proxy-based reaktivním motorem, jsou tyto problémy do značné míry vyřešeny. Přidávání vlastností k reaktivním objektům a změny polí podle indexu nebo délky jsou nyní výchozí reaktivní.

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

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

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

Nicméně, pochopení příčin ztráty reaktivity ve Vue 2 je užitečné při práci s děděným kódem nebo při přechodu mezi verzemi.