No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Watch

15/23
Recursos

¿Cómo funcionan los Watchers en el Composition API?

Los "watchers" en Vue.js son un aspecto esencial para gestionar cambios en las aplicaciones, permitiéndote escuchar los cambios en un estado reactivo y reaccionar ante ellos. Con el Composition API, el uso de watchers adopta un enfoque diferente al que podrías estar acostumbrado con el Options API. Ahora, veremos cómo implementarlos y aprovechar al máximo sus capacidades en el entorno del Composition API.

¿Qué son los watchers y cómo se implementan?

Los watchers son funciones observadoras que se activan cuando cambia una variable reactiva, dándote acceso al valor antiguo y al nuevo para ejecutar acciones en consecuencia. Se asemejan a las propiedades computadas, pero en lugar de calcular valores, monitorean los cambios.

Para implementar un watcher en el Composition API, se sigue el siguiente procedimiento:

  1. Importar la función watch: Asegúrate de importar watch de Vue, ya que será necesaria para definir los listeners.

    import { watch } from 'vue';
    
  2. Usar la función setup: Dentro de setup, defines tus datos reactivos y posteriormente los observers.

    setup() {
      const counter = ref(0);
      const object = reactive({ counter: 0 });
      
      // Ejemplo de uso con reactive
      watch(
        () => object.counter,
        (newValue, oldValue) => {
          console.log('Nuevo valor:', newValue, 'Valor anterior:', oldValue);
        }
      );
    }
    
  3. Definir los parámetros del watcher:

    • Primer parámetro: El valor a observar, en este caso usando una función que accede a la propiedad reactiva.
    • Segundo parámetro: La función de callback que se ejecuta con cada cambio, recibiendo el nuevo y antiguo valor.

¿Cómo se diferencia el uso entre ref y reactive?

La diferencia principal al usar ref y reactive en el contexto de watchers radica en cómo accedemos a los valores.

  • Con ref: Debes acceder al valor encapsulado usando .value.

    const counter = ref(0);
    watch(
      () => counter.value,
      (newVal, oldVal) => {
        // Manejo de cambios
      }
    );
    
  • Con reactive: Accedes al valor directamente porque reactive retorna una referencia al objeto original en forma de proxy.

    const object = reactive({ counter: 0 });
    watch(
      () => object.counter,
      (newVal, oldVal) => {
        // Manejo de cambios
      }
    );
    

¿Qué debes tener en cuenta al usar watchers con el Composition API?

Implementar watchers con el Composition API difiere ligeramente a como se haría en el Options API. Aquí destaca:

  • La programación funcional: Utilizar watch en el Composition API implica una sintaxis funcional que genera una mejor gestión de la reactividad, accediendo a los valores de manera adecuada.

  • Flexibilidad del callback: Dentro de la función callback, puedes integrar cualquier lógica en JavaScript vanilla o características específicas de Vue.js, logrando así un espectro completo de reacciones en tiempo real.

  • Ventajas de la sintaxis moderna: La sintaxis basada en funciones permite mayor claridad y separación lógica dentro del componente, siendo más escalable en aplicaciones grandes.

El Composition API y su manejo de watchers te brinda un enfoque más sistemático y flexible para escuchar cambios y actuar sobre ellos en tu aplicación Vue.js. Continúa experimentando y profundizando en estas herramientas para mejorar tus habilidades en el desarrollo moderno de interfaces.

Aportes 8

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Código de la clase:

<template>
  <h1>{{ text }}</h1>
  <h2>{{ counter }}</h2>
</template>

<script>
import { ref, watch } from "vue"

export default {
  setup() {
    const text = ref('Hello World')
    const counter = ref(0)

    text.value = 'Hello Vue!'

    setInterval(() => {
      counter.value++
    }, 1500)

    watch(counter, (newValue, oldValue) => {
      console.log(`old: ${oldValue} - new: ${newValue}`)
    })

    return {
      text,
      counter,
    }
  }
}
</script>

Resume de composition Api: lo mismo que option Api pero mas dificil 😅, ojala no se vuelva el estandar.

Watch recibe dos params: el valor que quiero escuchar, la function que va a ejecutar cada vez que haya un cambio.

La function a su vez, recibirá dos argumentos: el valor nuevo y el valor anterior

watch(obj, (valor_nuevo, valor_anterior ) => {
	console.log();
}

Me estoy enamorando de Vue! La profe es excelente!

seria bueno que la profe dejara la documentacion de vue que utiliza en las clases, para profundizar mas en algunos temas.

Un watcher en Vue.js es una función que escucha cambios en una variable reactiva. Es especialmente útil para ejecutar código cuando un valor cambia, como hacer peticiones a una API cuando un filtro de búsqueda se actualiza. Sí, los watchers son reactivos porque responden a cambios en las variables. Se asemejan al patrón Observer, ya que "observan" el estado reactivo y ejecutan ciertas acciones en respuesta a esos cambios. Esto permite mantener actualizada la interfaz de usuario de manera eficiente.
Yo lo se Vue, todos queremos ser React cuando crezcamos.

Mucho ojo con el uso de ref y reactive jajajjaa créanme cuando les digo que eso da una mano de dolores de cabeza cuando te estás acostumbrando, porque el tema del .value o que no tome el valor de la variable es una joda.