Haben Sie schon einmal einen Reaktivitätsverlust in Vue erlebt?

Ja, ich habe das erlebt. Der Reaktivitätsverlust in Vue 2 trat hauptsächlich in zwei Fällen auf:

1. Hinzufügen einer neuen Eigenschaft zu einem bestehenden Objekt direkt. Vue 2 verfolgt Änderungen nur für Eigenschaften, die zum Zeitpunkt der Objekterstellung vorhanden waren.
2. Ändern eines Arrays durch Index oder Ändern seiner Länge. Vue 2 konnte solche Änderungen nicht reaktiv verfolgen.

Zur Behebung dieser Probleme wurden $set-Methoden für Objekte und mutierende Array-Methoden (push, pop, shift, unshift, splice, sort, reverse) oder auf splice basierende Methoden verwendet, um Elemente zu ersetzen oder die Länge zu ändern.

// Reaktivitätsverlust beim Hinzufügen einer Eigenschaft
const obj = { a: 1 };
// obj.b = 2; // Nicht reaktiv in Vue 2

// Lösung mit $set
// Vue.$set(obj, 'b', 2);

// Reaktivitätsverlust beim Ändern eines Arrays durch Index
const arr = [1, 2, 3];
// arr[0] = 4; // Nicht reaktiv in Vue 2

// Lösung mit mutierenden Methoden
// arr.splice(0, 1, 4);

// Lösung mit $set für Arrays (weniger üblich, aber möglich)
// Vue.$set(arr, 0, 4);

In Vue 3, mit Composition API und reactive/ref, sowie einem verbesserten Proxy-basierten reaktiven Motor, sind diese Probleme weitgehend gelöst. Das Hinzufügen von Eigenschaften zu reaktiven Objekten und das Ändern von Arrays durch Index oder Länge sind standardmäßig reaktiv.

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

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

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

Dennoch ist es nützlich, die Ursachen des Reaktivitätsverlusts in Vue 2 zu verstehen, insbesondere bei der Arbeit mit Altcode oder beim Versionswechsel.