Cuando trabajamos con el Composition API de Vue, es común terminar con múltiples variables reactivas dispersas por todo el código. Reactive es la función que resuelve este problema al permitirnos agrupar toda la información reactiva en un solo objeto, similar a como funciona data en el Options API, pero con la flexibilidad de la programación funcional.
¿Qué es Reactive y por qué usarlo en lugar de ref?
Ya conocemos ref para crear referencias reactivas individuales. Sin embargo, a medida que crece la complejidad de un componente, mantener decenas de ref separados se vuelve difícil de gestionar. Reactive recibe un objeto y convierte todas sus propiedades internas en propiedades reactivas automáticamente [01:12].
Por ejemplo, en lugar de tener un ref para el producto y otro para la imagen activa, podemos crear un solo estado:
javascript
const productStates = reactive({
product: { /* objeto del producto */ },
activeImage: 0
});
De la misma forma, podemos agrupar todo lo relacionado con el carrito:
javascript
const cartState = reactive({
cartOpen: false,
cart: []
});
Esta organización por características hace que el código sea mucho más legible y mantenible [01:55].
¿Cómo se accede a las propiedades dentro de Reactive?
Una gran ventaja de reactive frente a ref es que no necesitamos usar .value para acceder a las propiedades [02:40]. Todo funciona como un objeto normal de JavaScript. Donde antes escribíamos product.value, ahora simplemente usamos productStates.product.
Esto significa que al migrar de ref a reactive, debemos:
- Reemplazar cada referencia directa por la ruta completa dentro del estado, por ejemplo
productStates.product.
- Eliminar todos los
.value de esas propiedades.
- Actualizar las funciones que manipulan esos datos, como agregar al carrito con
cartState.cart [02:52].
¿Qué es toRefs y cuándo es necesario?
Cuando la función setup retorna datos hacia el template, estos deben ser referencias. Los objetos creados con reactive no son referencias en sí mismos, sino proxies reactivos, similares a los que genera data internamente [03:15].
Para resolver esto, Vue nos ofrece la función toRefs, que convierte cada propiedad de un objeto reactivo en una referencia individual:
javascript
return {
...toRefs(productStates),
...toRefs(cartState),
addToCart
};
Esto equivale a crear manualmente cada ref a partir del estado, pero de forma automática y limpia [03:30]. Así el template sigue funcionando exactamente igual que antes.
¿Qué precauciones tomar al migrar a Reactive?
El proceso de migración requiere atención en varios puntos:
- Actualizar todas las referencias en funciones y expresiones, cambiando
product por productStates.product [02:22].
- Mantener las referencias simples que no pertenecen a un grupo, como un código de descuento que sigue siendo un
ref independiente [04:30].
- No olvidar funciones como
addToCart en el return, ya que no forman parte de la información reactiva del estado pero sí deben exponerse al template [03:55].
Un error frecuente es dejar alguna referencia antigua sin actualizar, lo que genera errores como cart is not defined. Revisar cada uso de las variables originales es fundamental para una migración exitosa [04:02].
¿Cómo organiza Reactive el código funcional?
La verdadera potencia de reactive está en la organización por dominio. En lugar de tener variables sueltas, agrupamos la información por contexto:
- Estado del producto: contiene el producto y la imagen activa.
- Estado del carrito: contiene el estado de apertura y los ítems.
- Referencias independientes: como el código de descuento.
Esta estructura permite que cada sección del código sea autocontenida y fácil de localizar, manteniendo las ventajas del Composition API sin perder claridad [04:50].
Si ya estás usando ref en tus componentes y sientes que el código crece sin control, reactive combinado con toRefs es el siguiente paso natural para mantener tu proyecto organizado. ¿Has probado combinar ambos enfoques en un mismo componente? Comparte tu experiencia.
