Avez-vous déjà rencontré une perte de réactivité dans Vue ?

Oui, j'ai rencontré cela. La perte de réactivité dans Vue 2 se produisait principalement dans deux cas :

1. Ajouter une nouvelle propriété directement à un objet existant. Vue 2 ne suit que les changements pour les propriétés qui étaient présentes dans l'objet au moment de sa création.
2. Modifier un tableau par indice ou changer sa longueur. Vue 2 ne pouvait pas suivre réactivement ces changements directement.

Pour résoudre ces problèmes, on utilisait les méthodes $set pour les objets et les méthodes mutatrices de tableau (push, pop, shift, unshift, splice, sort, reverse) ou des méthodes basées sur splice pour remplacer des éléments/changer la longueur.

// Perte de réactivité lors de l'ajout d'une propriété
const obj = { a: 1 };
// obj.b = 2; // Non réactif dans Vue 2

// Solution avec $set
// Vue.$set(obj, 'b', 2);

// Perte de réactivité lors de la modification d'un tableau par indice
const arr = [1, 2, 3];
// arr[0] = 4; // Non réactif dans Vue 2

// Solution avec méthodes mutatrices
// arr.splice(0, 1, 4);

// Solution avec $set pour les tableaux (moins courante, mais possible)
// Vue.$set(arr, 0, 4);

Dans Vue 3, avec l'utilisation de l'API Composition et reactive/ref, ainsi qu'un moteur réactif basé sur des proxies amélioré, ces problèmes sont largement résolus. L'ajout de propriétés aux objets réactifs et la modification des tableaux par indice ou longueur deviennent réactifs par défaut.

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

const obj = reactive({ a: 1 });
obj.b = 2; // Réactif dans Vue 3

const arr = reactive([1, 2, 3]);
arr[0] = 4; // Réactif dans Vue 3
arr.length = 1; // Réactif dans Vue 3

Cependant, comprendre les causes de la perte de réactivité dans Vue 2 est utile lors de la manipulation de code hérité ou lors de la transition entre versions.