Reactividad con `ref` en Vue 3: Creación y Uso Práctico

¿Cómo funciona ref en Vue 3?

En Vue 3, uno de los conceptos fundamentales para trabajar con la reactividad es el uso de ref. Si alguna vez has escuchado la frase "reactividad en Vue" y te has preguntado de qué se trata, estás de suerte pues vamos a desmenuzar este tema de manera clara.

¿Qué es ref?

ref es una función proporcionada por Vue que nos permite crear variables reactivas. Estas variables son como "contenedores mágicos" que actualizan automáticamente las vistas (el HTML) cada vez que cambian.

Es decir, con ref puedes vincular datos y la interfaz de usuario de forma sencilla y eficiente.

Imagina que tienes una caja (tu aplicación) y que dentro de esta caja tienes un sensor que detecta cambios. Cada vez que algo en la caja se mueve o cambia, el sensor envía una señal y actualiza el exterior de la caja (la interfaz). Eso es exactamente lo que hace ref.

---

Cómo funciona ref

Cuando utilizas ref, estás creando un objeto reactivo que envuelve un valor. Este objeto tiene una propiedad llamada value, que es donde realmente se almacena el valor. Para modificar o acceder a este valor, necesitas usar esta propiedad.

Por ejemplo:

<script setup>
import { ref } from 'vue';

const count = ref(0)

const increment = () => { 
  count.value++; 
}

</script>

En este ejemplo:

• Declaramos count como un valor reactivo con ref(0). Esto significa que count empieza en 0.
• Usamos count.value para acceder o modificar su valor.
• Cada vez que cambiamos count.value, Vue detecta el cambio y actualiza automáticamente la vista donde se utiliza.

En tu plantilla (HTML), puedes mostrar el valor con:

<template>
  <div>
    <p>El contador está en: {{ count }}</p>
    <button @click="increment">Incrementar</button>
  </div>
</template>

---

¿Por qué usar .value?

Esto es necesario porque ref crea un "envoltorio" alrededor del valor. Este envoltorio permite a Vue rastrear los cambios en el valor, pero significa que siempre debes acceder a él mediante la propiedad value en JavaScript. Sin embargo, en las plantillas, no necesitas usar .value, ya que Vue lo maneja automáticamente.

⚠️ Nota importante: Si olvidas usar .value en tu código JavaScript, no verás los cambios reflejados y probablemente te confundas. Así que ¡no lo olvides!

---

¿Qué tipos de valores puede manejar ref?

ref es extremadamente flexible. Puedes usarlo con:

1. Valores primitivos: como números, cadenas, booleanos, etc.

   const message = ref('Hola, Vue 3!');
   message.value = 'Reactividad es asombrosa!';
   

2. Objetos: Aunque aquí es más común usar reactive (lo veremos en otra lección), puedes usar ref si necesitas una reactividad más específica.

   const user = ref({ name: 'Enrique', age: 25 });
   user.value.name = 'María';
   

3. Arrays: Puedes manipularlos como harías normalmente.

   const items = ref([1, 2, 3]);
   items.value.push(4); // [1, 2, 3, 4]
   

ref es una herramienta fundamental y esencial para cualquier desarrollador que trabaje con Vue 3.

Entender cómo funciona y cuándo usarlo te ayudará a construir aplicaciones reactivas de manera eficiente.

Recuerda:

1. Usa ref para valores individuales o cuando necesites una reactividad controlada.
2. Siempre accede o modifica el valor con .value en JavaScript.
3. Practica con ejemplos sencillos y experimenta para dominar este concepto.