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.
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:
Valores primitivos: como números, cadenas, booleanos, etc.
const message =ref('Hola, Vue 3!');message.value='Reactividad es asombrosa!';
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';
Arrays: Puedes manipularlos como harías normalmente.
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:
Usa ref para valores individuales o cuando necesites una reactividad controlada.
Siempre accede o modifica el valor con .value en JavaScript.
Practica con ejemplos sencillos y experimenta para dominar este concepto.
Tengo un par de preguntas:
En lugar de poner @click estaba probando y con :onclick también me deja realizar las mismas funciones
, ¿Es esto simplemente una mala práctica o es algo que puede traer problemas en el funcionamiento? ¿Por qué?
Estaba jugando con ref, en una de mis pruebas quería ver cómo qué cosas más tenía ref, hice un console.log de esta forma:
, lo que esperaba es que se pinte el valor antiguo del ref, y luego recién lo incremente, pero lo que pasó fue esto:
, en el preview del objeto, se puede ver que el valor es 0, que es el valor antiguo del counter, pero al desplegarlo es 1, el valor nuevo, ¿Es porque se actualiza tan rápido el ref? Y luego, cuándo pruebo con el setTimeout si me da lo que esperaba:
