Watchers en Composition API de Vue.js: Sintaxis y Uso Práctico

Clase 15 de 23 • Curso de Vue.js: Componentes y Composition API

Resumen

¿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:

Importar la función watch: Asegúrate de importar watch de Vue, ya que será necesaria para definir los listeners.
```
import { watch } from 'vue';
```

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);
    }
  );
}

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.

Miguel Angel Reyes Moreno

student•

Código de la clase:

<template>
  <h2>{{ text }}</h2>
  <h3>{{ counter }}</h3>
</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>

Josue Cerron Tuesta

student•

Gracias bro!

Edward Camilo Martinez Frias

student•

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

Juan José Guzmán Cardona

student•

Totalmente de acuerdo, aparte dicen que más ordenado cuando todo queda más desordenado, anteriormente ordenabas por tipo y era un estándar para cualquiera, con esto, cuando llegabas a un código de Vue llegabas directo a la agrupación correspondiente, ahora toca crear una documentación del código para saber como al desarrollador se le ocurrió agrupar, ya que queda al libre albedrío.

Maximiliano Chamena

student•

Yo pensaba igual que juan pero creo que es mas comodo a la hora de definir una variables y utilizarla en el momento, imagina que tienes 400 lineas de codigo, y en OptionsAPI, la propiedad Data se encuentra en la linea 50, mientras que tu propiedad Watch/Computed/Methods esta en la linea 350, tenes que hacer un scroll innecesario de 300 lineas de codigo. Por el contrario en CompositionAPI lo que logramos es, la variable la definis en la linea 50, y en la linea 55 usas la variable, y mas adelante necesitas otra variable, la definis en el momento que la usas, queda en pequeños grupos donde no hay que scrollear y optimizamos para cuando es codigo externo.

Sam Leonetti

student•

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();
}

Carlos Rodríguez

student•

Me estoy enamorando de Vue! La profe es excelente!

Katherine Alondra Ruiz

student•

Que pasa si quiero hacer watch de varias variables? se tendría que declarar varias veces el watch? algo asi:

watch(obj1,(valor, anterior)=>{ //mi codigo para obj1 }) watch(obj2,(valor, anterior)=>{ //mi codigo para obj2 })

Diana Martinez

student•

Si, para cada cosa un watcher, excepto tal vez en algunas ocasiones con objetos que contienen múltiples valores, pero lo ideal es poder separar para tener un código más limpio que haga cosas muy específicas.

Juan Guillermo Perez Cardozo

student•

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

Mauricio Jourdan

student•

Sería bueno tener ejemplos un poquito más elaborados. Una mini practica que continúe entre los distintos temas haría más interesante el curso. Se entiende pero es como leer documentación dura.

Fabricio Orrala

student•

Me quedó la duda sobre donde usar watch. En el Options API se usaba al mismo nivel que computed, que mounted, etc. Y dentro se usaban las variables a escuchar. Acá se la usa como llamada a una función. Mi pregunta es, se la puede usar en cualquier lado? sea en un método, o solo en el setup?

Diana Martinez

student•

Setup pasa a ser como el nuevo contexto, de lo que antes era el objeto JSON que definía el componente, de modo que en adelante, watch, computed, y los eventos del ciclo de vida, todo eso, en su versión funcional con Composition API, va dentro de la función setup.

Hector Daniel Tapia

student•

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.

Julio Emiliano Garza Jiménez

student•

Yo lo se Vue, todos queremos ser React cuando crezcamos.

Jose Alejandro Pantoja Giraldo

student•

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.

Watchers en Composition API de Vue.js: Sintaxis y Uso Práctico

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

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

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

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

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