Reactividad en Vue con ref

Contenido del curso

Conceptos básicos de Vue

Reactividad en Vue

Composición en Vue

Manejo de eventos e inputs

Optimización en Vue

Despliegue

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:10

Reactividad en Vue con ref

Curso de Vue.js

Clase 11 de 34

Clase 11 / 34

Comentarios (5)5 comentarios

Fernando Emilio Díaz López

Hace un año

¿Cuando usar la API o directiva ref o reactive?

Ref es recomendado cuando trabajaremos con tipos de datos primitivos (integers, strings, booleans)

import { ref } from 'vue'

async function increment() {
  count.value++ 
}

Reactive es mejor cuando trabajamos con objetos o arreglos, debido a que podemos mutar directamente sus valores sin usar .value

const state = reactive({ count: 0 })

<button @click="state.count++">

Yahir Eduardo Bravo Tafur

Hace 2 años

Dejo algo de documentación sobre reactividad:

Fernando Emilio Díaz López

Hace un año

Recap de los métodos abreviados

v-bind: Nos permite pasar valores de JS al componente hijo mediante props con la abreviación ":"

VariableMostrada = 10

y la mostramos en HTML usando el doble corchete {{ VariableMostrada }}

v-on: Enlaza eventos del DOM como una funcion, tambien tiene una abreviación el simbolo "@"

Ejemplo

const increment = () => {

counter.value++;

}

Carlos QUESADA

Hace un año

Si se esta trabajando con vistas razor, para usar el abreviado de v-on:click se puede añadir con @@click

Jesús David Díaz Hernández

Hace un año

Yo decidí configurar tailwinds para optimizar trabajo y lineas de código

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

const counter = ref(0)

const increment = () => {
  counter.value++
}

const decrement = () => {
  counter.value--
}

const { minNumber, maxNumber } = defineProps({
  minNumber: {
    type: Number,
    required: true,
  },
  maxNumber: {
    type: Number,
    required: true,
  },
  //   example: {
  //     type: String,
  //     validator: (value) => value.includes('+', '-'),
  //   }
  // example: {
  //   type: Array,
  //   default: () => [1, 2, 3, 4],
  // },
  // example: {
  //   type: Object,
  //   default: () => ({ name: 'Jesús Díaz', age: 23, hobby: 'programming' }),
  // },
})
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <span class="text-white text-6xl font-bold hover:scale-110 transition-transform duration-300">
      {{ counter }}
    </span>
    <div class="flex items-center gap-x-4">
      <button @click="decrement" class="w-12 h-12 bg-white/40 text-white rounded-xl cursor-pointer">
        -
      </button>
      <button @click="increment" class="w-12 h-12 bg-white/40 text-white rounded-xl cursor-pointer">
        +
      </button>
    </div>
  </div>
</template>

Recursos

La reactividad en Vue es la capacidad de mutar el DOM sin renderizar toda la página, y se logra declarando estados que actúan como el alma de cada componente. Si estás aprendiendo Vue.js y quieres construir interfaces interactivas, dominar ref es el primer paso para que tus contadores, formularios y listas cobren vida.

Qué es la reactividad en Vue y por qué importa

La reactividad permite que un componente actualice únicamente los nodos HTML que cambian, en lugar de volver a pintar toda la aplicación. Esto evita renders costosos y hace que tu interfaz responda al instante cuando un valor cambia.

Dentro de un componente Vue, declaras un estado: información interna que puede mutar mientras la aplicación está activa. Cuando ese estado cambia, Vue se encarga de reflejarlo en el DOM solo donde es necesario.

¿Qué es un estado en Vue? Es una variable reactiva que vive dentro de un componente y, al cambiar de valor, actualiza automáticamente las partes del template enlazadas a ella.

Cómo declarar un estado reactivo con ref en Vue

La API ref es la forma más común de crear reactividad en Vue [01:14]. Existen otras como reactive o las propiedades computadas, pero ref resuelve la mayoría de los casos cuando empiezas.

El flujo es directo:

Importa ref desde Vue con import { ref } from 'vue'.
Declara una variable, por ejemplo const counter = ref(0), pasando el valor inicial dentro de los paréntesis.
Usa esa variable en el template interpolándola con dobles llaves.

Si no le das un valor inicial, el estado queda undefined y no se mostrará nada en pantalla. Por eso siempre conviene inicializarlo, ya sea con un número, un string, un objeto o un arreglo. Cualquier tipo de dato de JavaScript es válido dentro de un ref.

Por qué necesitas usar .value al modificar un ref

Un ref no es una variable común; piénsalo como una cajita o wrapper que envuelve el valor real. Para acceder o modificar ese valor desde JavaScript, debes escribir counter.value [03:08].

Por ejemplo, una función increment se vería así:

js const increment = () => { counter.value++ }

const decrement = () => { counter.value-- }

La única excepción es cuando usas el estado directamente en el template de Vue: ahí no necesitas .value, Vue lo desempaqueta por ti.

¿Cuándo uso .value en un ref? Siempre que leas o modifiques el estado desde el bloque <script>. En el template, Vue lo resuelve automáticamente.

Cómo enlazar eventos con la directiva v-on en Vue

Para que tu contador reaccione a clics, necesitas conectar tus funciones a eventos del DOM. Vue ofrece la directiva v-on, que permite escuchar eventos como click, focus o change [04:14].

La sintaxis larga es v-on:click="increment", pero Vue tiene un shortcut mucho más limpio: el símbolo @. Así, tu botón quedaría:

html <button @click="decrement">-</button> <button @click="increment">+</button>

Con esto, cada vez que hagas clic, la función correspondiente actualiza el .value del estado y Vue muta solo el nodo HTML donde se interpola el contador. Los botones no se vuelven a pintar; únicamente cambia el número en pantalla.

Qué pasa cuando recargas la página

Aquí viene un detalle clave: los estados nacen en el momento en que son llamados, pero no perpetúan al recargar la aplicación. Si refrescas el navegador, el contador vuelve a su valor inicial.

Para conservar información entre sesiones se usan APIs del navegador como local storage o IndexedDB. Eso sí, ten cuidado con lo que almacenas: guardar datos sensibles ahí puede romper normativas internacionales de protección de datos. No lo hagas.

Buenas prácticas al trabajar con estados reactivos

Algunos puntos que conviene recordar mientras experimentas con ref:

Inicializa siempre tus estados con un valor por defecto para evitar undefined.
Usa .value solo dentro del <script>, nunca en el template.
Aprovecha el shortcut @ en lugar de v-on: para mantener el código legible.
Reserva local storage o IndexedDB para datos no sensibles cuando necesites perpetuar el estado.

La reactividad es la base de cualquier aplicación web moderna construida con Vue o React. Una vez la entiendes, puedes construir desde un contador simple hasta dashboards complejos sin preocuparte por manipular el DOM manualmente.

¿Qué estado vas a crear primero en tu próximo componente Vue? Cuéntame en los comentarios qué tipo de dato usarás dentro de tu ref.

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

const counter = ref(0)

const increment = () => {
  counter.value++
}

const decrement = () => {
  counter.value--
}

const { minNumber, maxNumber } = defineProps({
  minNumber: {
    type: Number,
    required: true,
  },
  maxNumber: {
    type: Number,
    required: true,
  },
  //   example: {
  //     type: String,
  //     validator: (value) => value.includes('+', '-'),
  //   }
  // example: {
  //   type: Array,
  //   default: () => [1, 2, 3, 4],
  // },
  // example: {
  //   type: Object,
  //   default: () => ({ name: 'Jesús Díaz', age: 23, hobby: 'programming' }),
  // },
})
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <span class="text-white text-6xl font-bold hover:scale-110 transition-transform duration-300">
      {{ counter }}
    </span>
    <div class="flex items-center gap-x-4">
      <button @click="decrement" class="w-12 h-12 bg-white/40 text-white rounded-xl cursor-pointer">
        -
      </button>
      <button @click="increment" class="w-12 h-12 bg-white/40 text-white rounded-xl cursor-pointer">
        +
      </button>
    </div>
  </div>
</template>

Resumen

Qué es la reactividad en Vue y por qué importa

¿Qué es un estado en Vue? Es una variable reactiva que vive dentro de un componente y, al cambiar de valor, actualiza automáticamente las partes del template enlazadas a ella.

Cómo declarar un estado reactivo con ref en Vue

La API ref es la forma más común de crear reactividad en Vue [01:14]. Existen otras como reactive o las propiedades computadas, pero ref resuelve la mayoría de los casos cuando empiezas.

El flujo es directo:

Importa ref desde Vue con import { ref } from 'vue'.
Declara una variable, por ejemplo const counter = ref(0), pasando el valor inicial dentro de los paréntesis.
Usa esa variable en el template interpolándola con dobles llaves.

Por qué necesitas usar .value al modificar un ref

Un ref no es una variable común; piénsalo como una cajita o wrapper que envuelve el valor real. Para acceder o modificar ese valor desde JavaScript, debes escribir counter.value [03:08].

Por ejemplo, una función increment se vería así:

js const increment = () => { counter.value++ }

const decrement = () => { counter.value-- }

La única excepción es cuando usas el estado directamente en el template de Vue: ahí no necesitas .value, Vue lo desempaqueta por ti.

¿Cuándo uso .value en un ref? Siempre que leas o modifiques el estado desde el bloque <script>. En el template, Vue lo resuelve automáticamente.

Cómo enlazar eventos con la directiva v-on en Vue

Para que tu contador reaccione a clics, necesitas conectar tus funciones a eventos del DOM. Vue ofrece la directiva v-on, que permite escuchar eventos como click, focus o change [04:14].

La sintaxis larga es v-on:click="increment", pero Vue tiene un shortcut mucho más limpio: el símbolo @. Así, tu botón quedaría:

html <button @click="decrement">-</button> <button @click="increment">+</button>

Qué pasa cuando recargas la página

Aquí viene un detalle clave: los estados nacen en el momento en que son llamados, pero no perpetúan al recargar la aplicación. Si refrescas el navegador, el contador vuelve a su valor inicial.

Buenas prácticas al trabajar con estados reactivos

Algunos puntos que conviene recordar mientras experimentas con ref:

Inicializa siempre tus estados con un valor por defecto para evitar undefined.
Usa .value solo dentro del <script>, nunca en el template.
Aprovecha el shortcut @ en lugar de v-on: para mantener el código legible.
Reserva local storage o IndexedDB para datos no sensibles cuando necesites perpetuar el estado.

¿Qué estado vas a crear primero en tu próximo componente Vue? Cuéntame en los comentarios qué tipo de dato usarás dentro de tu ref.

Conceptos básicos de Vue

Gráfica de barras reactiva con Vue.js

Creación de un Proyecto Vue desde Cero

Estructura de un Single File Component en Vue

Fundamentos de Vue.js: Montaje y Virtual DOM

Estilos en Vue: Scoped, Clases Dinámicas y Uso de Sass

Agregar estilos globales y scripts en aplicaciones Vue.js

Sintaxis Vue: v-bind y dobles corchetes

Props y Comunicación entre Componentes en VueJS

Validación de props en Vue con tipos y reglas

Vue 3: Uso y Ventajas de la Composition API

Reactividad en Vue

Reactividad en Vue con ref

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

Uso de Watchers en Vue para Controlar Estados Reactivos

Computed properties en Vue y su caché

v-if vs v-show no Vue explicados

Ciclos de Vida de Componentes en Vue 3: Guía Completa

Composición en Vue

Pensamiento por componentes en Vue

Consumir una API con reactive en Vue

Diferencias entre reactive y ref en Vue 3

Renderizar listas con v-for en Vue

Slots y named slots en Vue

Herencia de Atributos en Componentes Vue: Uso y Ejemplos Prácticos

Manejo de eventos e inputs

Manejo de Inputs y Estado con VModel en Vue.js

Eventos y Modificadores en Vue: Focus y Blur en Searchbar

Eventos EMIT en Vue: Comunicación entre Componentes

Optimización en Vue

Componentes dinámicos con la tag component

Implementación de Modales y Manejo de Estado Global en Vue.js

Uso de Teleport en Vue para Optimizar el Renderizado de Modales

Uso de Composables en Vue para Reutilización de Lógica

refs en Vue para acceder al DOM real

Virtual DOM en Vue: Funcionamiento y Beneficios

Despliegue

Despliegue de Aplicaciones Vue: De Desarrollo a Producción

Cómo desplegar Vue en Netlify con GitHub

Despliegue de Aplicaciones Web con GitHub Actions y Pages

Reactividad en Vue con ref