Uso de Watchers en Vue para Controlar Estados Reactivos

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:0010:49

Uso de Watchers en Vue para Controlar Estados Reactivos

Curso de Vue.js

Clase 13 de 34

Clase 13 / 34

Comentarios (4)4 comentarios

Carlos Rodríguez

Hace un año

También ppodemos usar el watch mediante la obtención de el valor nuevo que acaba de cambiar

watch(counter, (newCounter, oldCounter) => {
  if (newCounter === xxx) {
    //   
  }
})

Paola Zapata

Hace un año

hola, seria bueno que uses no uses la pantalla en la parte inferior, ya que no se ve muy bien con las herramientas del video(play, stop..)

Desarrollador itglobers

Hace 8 meses•editado

watch(counter, () => {
  if (counter.value === numberToGuess) {
    jsConfetti.addConfetti();
    dissable = true;

    setTimeout(() => {
      const ok = confirm("¿Jugar de nuevo?");
      if (ok) {
        ({ initialRandomNumber, numberToGuess } = getRandomNumbers({ maxNumber, minNumber }));
        counter.value = initialRandomNumber
        dissable = false;
      }
    }, 1000)
  }
})

Si alguien le interesa, hice un código para jugar de nuevo

franco maidana

Hace 2 años

buenas consulta, hay algún repositorio git para ver los códigos? es que pausar la pantalla a cada rato y copiar el código es fastidioso,

Recursos

¿Qué son los Watchers en Vue y cómo utilizarlos?

Los Watchers en Vue son una poderosa herramienta que permite a los desarrolladores observar y reaccionar ante cambios en el estado de una aplicación. Son muy útiles cuando se quiere ejecutar una acción cada vez que una propiedad reactiva cambie de valor. En esta clase aprenderemos a utilizar los Watchers para monitorear el estado de nuestro componente 'game counter' y disparar efectos visuales con la librería JS confetti cuando el usuario acierte un número.

¿Cómo preparar el entorno para trabajar con Watchers?

La preparación del entorno es fundamental antes de empezar a usar Watchers. Primero, asegúrate de estar en la rama de trabajo apropiada, en este caso, la rama vue-watcher-start, que contiene pequeños ajustes en la lógica del contador. Estos ajustes incluyen:

Un generador de números aleatorios para la inicialización del contador.
Lógica que evita que el contador supere el valor máximo o se torne negativo.

Para esto, utiliza el comando en terminal:

git checkout vue-watcher-start

¿Cuál es el objetivo del juego con el contador?

El juego consiste en presionar botones para incrementar o decrementar un contador hasta acertar un número generado aleatoriamente, el cual se debe adivinar. Cuando el usuario acierta, el objetivo es lanzar confetti como señal de triunfo.

¿Cómo implementar JS confetti en el juego?

Para empezar, debemos instalar la librería JS confetti. Primero, carga la dependencia con:

npm install js-confetti

Lo que buscamos es que al acertar el número, se dispare el confetti. En lugar de poner lógica de verificación dentro de las funciones de incremento o decremento, utilizaremos un Watcher para monitorear el estado del contador:

¿Cómo utilizar WatchEffect para monitorear cambios?

El WatchEffect permite ejecutar un efecto cada vez que un estado reacivo cambie dentro del cuerpo de la función:

watchEffect(() => {
  console.log(`El contador ha cambiado a: ${counter.value}`);
});

¿Por qué elegir 'watch' en lugar de 'watchEffect'?

Aunque WatchEffect es útil, suele ser más controlado usar watch, dado que permite especificar exactamente qué propiedades reactivas queremos monitorear, evitando ejecuciones innecesarias en múltiples cambios de estados:

watch(counter, (newValue) => {
  console.log(`El contador ha cambiado a: ${newValue}`);
  if (newValue === numberToGuess) {
    jsConfettiInstance.addConfetti();
  }
});

Este método mejora la eficiencia y performance al limitar las propiedades observadas.

¿Cómo limitar los efectos múltiples de confetti?

Para evitar que el confetti se dispare múltiples veces, introduce un estado adicional que marque si el usuario ya ha ganado:

const win = ref(false);

watch(counter, (newValue) => {
  if (newValue === numberToGuess && !win.value) {
    jsConfettiInstance.addConfetti();
    win.value = true;
  }
});

Este estado se actualizará a true cuando se acierte, desactivando los botones para evitar nuevas modificaciones.

¿Qué consejos se deben seguir al usar Watchers?

Usa watch sobre watchEffect para un control más preciso.
Limita la cantidad de propiedades observadas para evitar problemas de rendimiento.
Implementa lógica con precaución para no causar múltiples renderizados innecesarios.

Los Watchers son una funcionalidad clave de Vue cuando se desea realizar acciones específicas ante cambios de estado, pero su uso indebido puede afectar la performance de la aplicación. Siempre es recomendable aplicar prácticas óptimas para un desarrollo fluido y eficiente.

watch(counter, () => {
  if (counter.value === numberToGuess) {
    jsConfetti.addConfetti();
    dissable = true;

    setTimeout(() => {
      const ok = confirm("¿Jugar de nuevo?");
      if (ok) {
        ({ initialRandomNumber, numberToGuess } = getRandomNumbers({ maxNumber, minNumber }));
        counter.value = initialRandomNumber
        dissable = false;
      }
    }, 1000)
  }
})

Resumen

¿Qué son los Watchers en Vue y cómo utilizarlos?

¿Cómo preparar el entorno para trabajar con Watchers?

Un generador de números aleatorios para la inicialización del contador.
Lógica que evita que el contador supere el valor máximo o se torne negativo.

Para esto, utiliza el comando en terminal:

git checkout vue-watcher-start

¿Cuál es el objetivo del juego con el contador?

¿Cómo implementar JS confetti en el juego?

Para empezar, debemos instalar la librería JS confetti. Primero, carga la dependencia con:

npm install js-confetti

¿Cómo utilizar WatchEffect para monitorear cambios?

El WatchEffect permite ejecutar un efecto cada vez que un estado reacivo cambie dentro del cuerpo de la función:

watchEffect(() => {
  console.log(`El contador ha cambiado a: ${counter.value}`);
});

¿Por qué elegir 'watch' en lugar de 'watchEffect'?

watch(counter, (newValue) => {
  console.log(`El contador ha cambiado a: ${newValue}`);
  if (newValue === numberToGuess) {
    jsConfettiInstance.addConfetti();
  }
});

Este método mejora la eficiencia y performance al limitar las propiedades observadas.

¿Cómo limitar los efectos múltiples de confetti?

Para evitar que el confetti se dispare múltiples veces, introduce un estado adicional que marque si el usuario ya ha ganado:

const win = ref(false);

watch(counter, (newValue) => {
  if (newValue === numberToGuess && !win.value) {
    jsConfettiInstance.addConfetti();
    win.value = true;
  }
});

Este estado se actualizará a true cuando se acierte, desactivando los botones para evitar nuevas modificaciones.

¿Qué consejos se deben seguir al usar Watchers?

Usa watch sobre watchEffect para un control más preciso.
Limita la cantidad de propiedades observadas para evitar problemas de rendimiento.
Implementa lógica con precaución para no causar múltiples renderizados innecesarios.

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

Uso de Watchers en Vue para Controlar Estados Reactivos