Hai mai riscontrato una perdita di reattività in Vue?

Sì, ho avuto questa esperienza. La perdita di reattività in Vue 2 si verificava principalmente in due casi:

1. Aggiunta di una nuova proprietà direttamente a un oggetto esistente. Vue 2 traccia solo le modifiche alle proprietà presenti nell'oggetto al momento della sua creazione.
2. Modifica di un array tramite indice o cambiando la sua lunghezza. Vue 2 non poteva tracciare reattivamente questi cambiamenti direttamente.

Per risolvere questi problemi, si utilizzavano i metodi $set per gli oggetti e i metodi mutatori degli array (push, pop, shift, unshift, splice, sort, reverse) o metodi basati su splice per sostituire elementi/cambiare la lunghezza.

// Perdita di reattività nell'aggiunta di una proprietà
const obj = { a: 1 };
// obj.b = 2; // Non reattivo in Vue 2

// Soluzione con $set
// Vue.$set(obj, 'b', 2);

// Perdita di reattività nel modificare un array tramite indice
const arr = [1, 2, 3];
// arr[0] = 4; // Non reattivo in Vue 2

// Soluzione con metodi mutatori
// arr.splice(0, 1, 4);

// Soluzione con $set per array (meno comune, ma possibile)
// Vue.$set(arr, 0, 4);

In Vue 3, con l'uso di Composition API e reactive/ref, oltre a un motore reattivo basato su proxy migliorato, questi problemi sono ampiamente risolti. L'aggiunta di proprietà agli oggetti reattivi e la modifica di array tramite indice o lunghezza diventano reattivi di default.

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

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

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

Tuttavia, comprendere le cause della perdita di reattività in Vue 2 è utile quando si lavora con codice legacy o si effettua la transizione tra versioni.