Vue 3 introdujo un sistema de reactividad completamente rediseñado, y reactive() es una de las herramientas más utilizadas dentro de la Composition API. En proyectos de administración empresarial como Naive UI Admin, convierte objetos simples en estructuras reactivas para formularios, tablas y gestores de estado. Este artículo reparte patrones prácticos, diferencias clave con ref() y errores frecuentes a evitar.

¿Qué hace reactive?

reactive() recibe un objeto de JavaScript y devuelve un proxy reactivo. Cualquier cambio en sus propiedades se propaga automáticamente a la interfaz, siempre que se acceda a través del proxy. Es ideal cuando el estado se compone de varios campos relacionados.

// Ejemplo básico: formulario de acceso
const credenciales = reactive({
  usuario: 'admin',
  clave: '123456',
  usarCaptcha: true,
});

Gestión de formularios

En módulos como roles o permisos, los formularios suelen agrupar muchos campos. reactive mantiene todos bajo una misma referencia y facilita el seguimiento de cambios.

const parametros = reactive({
  nombre: 'NaiveAdmin',
});

const columnaAcciones = reactive({
  ancho: 250,
  titulo: 'Operaciones',
  clave: 'accion',
  fijo: 'derecha',
});

Estado complejo con toRefs

Cuando un hook o un componente hijo necesita partes del estado, conviene exportar referencias reactivas mediante toRefs. Así se conserva la reactividad al desestructurar.

const datos = reactive({
  bateria: {
    cargando: false,
    tiempoCarga: 0,
    tiempoDescarga: 0,
    nivel: 100,
  },
});

export function useBattery() {
  return {
    ...toRefs(datos.bateria),
    estadoBateria,
    calcularCarga,
    calcularDescarga,
  };
}

Estado local de componentes

Para componentes con múltiples banderas y objetos anidados, reactive centraliza el estado y evita una larga lista de ref.

const pantalla = reactive({
  mostrarLogin: false,
  cargando: false,
  hayError: false,
  mensaje: 'Contraseña incorrecta',
  acceso: {
    usuario: '',
    clave: '',
  },
});

¿Cuándo preferir reactive sobre ref?

• Usa reactive para estructuras con varias propiedades relacionadas, objetos anidados o configuraciones de componentes.
• Usa ref para primitivos simples, valores únicos como carga de peticiones o referencias a elementos del DOM.

Optimización del rendimiento

No todo necesita ser reactivo. Los datos que nunca cambian deben permanecer como objetos normales.

// Evita esto
const estatico = reactive({
  version: '2.1.0',
  entorno: 'produccion',
});

// Prefiere esto
const estatico = {
  version: '2.1.0',
  entorno: 'produccion',
};

Si solo las propiedades de primer nivel deben ser reactivas y el objeto es muy grande, shallowReactive puede reducir el costo de seguimiento.

Problemas frecuentes y soluciones

Desestructuración que pierde reactividad

const estado = reactive({ contador: 0 });
const { contador } = estado; // ❌ deja de ser reactivo

// Correcto
const { contador } = toRefs(estado); // ✅ mantiene la reactividad

Arrays reactivos

const tareas = reactive([
  { nombre: 'Finalizar pantalla de inicio', id: 1 },
  { nombre: 'Implementar permisos', id: 2 },
]);

Recuerda que, al modificar el aray, debes usar métodos que mutan la referencia reactiva o reemplazar el array completamente para garantizar la coherencia con la interfaz.