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.
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.
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:
, ¿Qué es lo que pasa acá y por qué?
Hope 👋
Espero que lo siguiente te sea de utilidad:
1. Si se puede usar los eventos nativos de las etiquetas de HTML, pero pueden presentar un riesgo de
inyección de script, lo mismo pasa con eventos como: onclick, onfocus, and onmouseenter
acá está documentación acerca de porqué no se debe usar:
2. El preview del objeto cuando se modifica counter hace referencia a su estado antiguo, pero, el
"desplegable" se muestra solo después de que la función termina, por lo que muestra el valor de 1.
Diferente a cuando colocas el settimeout, que como es "asíncrono" se ejecuta después de que la
función termina, por lo que ahora el "desplegable" muestra el valor antiguo del counter.
Hola,
creo que para la pregunta 1 usar el onclick es solo asignar la funcion y ya Vue no estaria escuchando el evento solo se lo pasa al DOM, Perderias el ciclo de vida reactivo del eventos.
