Para quienes han experimentado con bibliotecas como jQuery, el manejo del DOM puede resultar laborioso: recopilar datos, construir cadenas de texto, localizar elementos y actualizar el contenido directamente. Este enfoque manual requiere un esfuerzo considerable.

Al adoptar Vue, su capacidad de actualizar la vista automáticamente cuando los datos cambian transforma la experiencia de desarrollo. En lugar de manipular el DOM, te enfocas únicamente en la lógica de datos. Este comportamiento es impulsado por el sistema reactivo de Vue. En este artículo, examinaremos cómo los API ref y reactive en Vue 3 permiten que los datos se mantengan reactivos de manera eficiente.

La Reactividad como un Sistema de Proxy

La reactividad en Vue funciona mediante un modelo de proxy. Imagina que tus datos originales son un recurso sensible, y Vue asigna un administrador (Proxy) para controlar el acceso.

Todas las operaciones de lectura (get) y escritura (set) deben pasar por este administrador:

• Al leer datos, el administrador registra: "Este componente utiliza este dato aquí". Este proceso se denomina recolección de dependencias.
• Al modificar datos, el administrador notifica inmediatamente a todos los lugares registrados: "Los datos han cambiado, es necesario actualizarse". Esto se conoce como despacho de actualizaciones.

En Vue 3, la tecnología subyacente para este administrador es el Proxy de JavaScript ES6. Los API ref y reactive son las herramientas principales para crear datos reactivos.

reactive: Aplicando Reactividad a Objetos

El API reactive está diseñado para manejar tipos de objeto (incluyendo objetos y arrays). Toma un objeto estándar y devuelve una versión proxy reactiva.

import { reactive } from 'vue';

const datos = reactive({
  nombre: 'Analista Frontend',
  contenido: {
    titulo: 'Mecanismos de Reactividad en Vue',
    valoraciones: 0
  }
});

// Lectura: recolecta dependencias de forma implícita
console.log(datos.nombre); 

// Modificación: activa actualizaciones en la interfaz
datos.contenido.valoraciones++;

Una característica clave de reactive es su naturaleza profunda. Al acceder a propiedades anidadas (como datos.contenido.valoraciones), la reactividad se preserva. Su uso es intuitivo, similar a trabajar con objetos JavaScript comunes.

Consideraciones importantes con reactive:
La desestructuración de objetos reactivos puede romper la reactividad.

let { nombre, contenido } = datos;
nombre = 'Desarrollador Experimentado'; // La vista no se actualiza

Al desestructurar, la variable nombre se convierte en un string independiente, perdiendo la conexión con el proxy original. El administrador de reactividad ya no puede rastrear estos cambios.

ref: Un Enfoque Universal para Datos Reactivos

Para superar las limitaciones de reactive (solo tipos de objeto) y evitar la pérdida de reactividad durante desestructuraciones, se introdujo ref. Este API puede manejar cualquier tipo de dato, incluyendo valores primitivos (cadenas, números, etc.) y objetos.

La implementación de ref es ingeniosa: envuelve el valor proporcionado en un objeto especial con una propiedad .value.

import { ref } from 'vue';

const contador = ref(0);
const modoTema = ref('claro');
const infoUsuario = ref({ nombre: 'Ana' });

// Lectura y modificación requieren acceder a .value
console.log(contador.value); // 0
contador.value++;

console.log(infoUsuario.value.nombre); // 'Ana'
infoUsuario.value.nombre = 'Carlos';

Puedes visualizar ref como un "contenedor reactivo". No importa lo que contenga, siempre debes acceder a .value para operar con él. Esta capa adicional garantiza que el enlace reactivo persista, incluso si el dato se pasa entre funciones o componentes.

Simplificación en plantillas Vue:
En la sección template, no es necesario escribir .value. Vue se encarga de "desempaquetar" el valor automáticamente.

<template>
  <div>{{ contador }}</div> <!-- Se omite .value -->
</template>

Selección entre ref y reactive: Mejores Prácticas

La elección entre ref y reactive es una decisión común en el desarrollo con Vue 3. Basado en la práctica, aquí hay algunas directrices:

1. Priorizar ref:
   • Al trabajar con datos primitivos, ref es la única opción viable.
   • Cuando se extraen o pasan datos reactivos de forma independiente, ref ofrece mayor seguridad frente a desestructuraciones accidentales.
   • Para mantener la consistencia en el código, usar ref uniformemente reduce la complejidad cognitiva (recordar que en JavaScript se requiere .value).
2. Usar reactive en escenarios específicos:
   • Para agrupar datos relacionados en un único objeto reactivo, como estados de formularios complejos.
   • Cuando se tiene certeza de que el objeto no se desestructurará ni se reemplazará por completo durante su ciclo de vida.

Una regla empírica: en caso de duda, optar por ref. Esta tendencia es respaldada por recomendaciones del equipo central de Vue.

Dominar ref y reactive es fundamental para escribir aplicaciones Vue 3 eficientes y mantenibles, aprovechando al máximo el sistema reactivo.