¿Alguna vez has enfrentado la pérdida de reactividad en Vue?

Sí, he tenido esa experiencia. La pérdida de reactividad en Vue 2 ocurría principalmente en dos casos:

1. Agregar una nueva propiedad directamente a un objeto existente. Vue 2 solo rastrea cambios en las propiedades que estaban presentes en el objeto en el momento de su creación.
2. Modificar un array por índice o cambiar su longitud. Vue 2 no podía rastrear reactivamente estos cambios directamente.

Para solucionar estos problemas, se utilizaban los métodos $set para objetos y métodos mutadores de arrays (push, pop, shift, unshift, splice, sort, reverse) o métodos basados en splice para reemplazar elementos/cambiar la longitud.

// Pérdida de reactividad al agregar una propiedad
const obj = { a: 1 };
// obj.b = 2; // No reactivo en Vue 2

// Solución con $set
// Vue.$set(obj, 'b', 2);

// Pérdida de reactividad al modificar un array por índice
const arr = [1, 2, 3];
// arr[0] = 4; // No reactivo en Vue 2

// Solución con métodos mutadores
// arr.splice(0, 1, 4);

// Solución con $set para arrays (menos común, pero posible)
// Vue.$set(arr, 0, 4);

En Vue 3, usando Composition API y reactive/ref, además de un motor reactivo basado en proxies mejorado, estos problemas se resuelven en gran medida. Agregar propiedades a objetos reactivos y modificar arrays por índice o longitud se vuelven reactivos por defecto.

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

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

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

No obstante, entender las causas de la pérdida de reactividad en Vue 2 es útil al trabajar con código heredado o al hacer la transición entre versiones.