Creación de Observadores Personalizados en Vue Composition API

Clase 31 de 37 • Curso de Reactividad con Vue.js 3

Resumen

¿Cómo crear observadores personalizados en Vue.js utilizando el Composition API?

En el mundo de la programación reactiva, contar con la capacidad de observar cambios de estado es esencial para construir aplicaciones interactivas y dinámicas. Vue.js, a través de su Composition API, nos permite implementar observadores de manera eficiente y personalizada. En este artículo, exploraremos cómo puedes implementar observadores personalizados en Vue.js y profundizar en el manejo de propiedades reactivas.

¿Qué son los observadores (Watchers) en Vue.js?

Los observadores en Vue.js son herramientas fundamentales que nos permiten escuchar y responder a los cambios en las propiedades reactivas. Son especialmente útiles cuando necesitamos realizar acciones específicas cada vez que una propiedad cambia de valor. En el Composition API, los observadores se crean con la función watch, la cual ofrece una gran flexibilidad y eficiencia.

¿Cómo crear un observador básico en el Composition API?

Para ilustrar esto, supongamos que estamos trabajando dentro de un componente Product. Comenzaremos importando la función watch desde Vue y luego implementaremos un observador que vigile cambios en propiedades específicas:

import { watch } from 'vue';

const productState = reactive({
  activeMatch: 0,
  priceColor: 'blue',
  stock: 10,
  cart: []
});

// Observador de 'activeMatch'
watch(
  () => productState.activeMatch,
  (newValue, oldValue) => {
    console.log('Valor actual:', newValue);
    console.log('Valor antiguo:', oldValue);
  }
);

En este fragmento, estamos observando la propiedad activeMatch. Cada vez que cambia, los valores nuevos y antiguos se imprimen en la consola.

¿Cuáles son los desafíos comunes al utilizar observadores?

Uno de los desafíos al usar observadores en el Composition API es asegurarnos de que las propiedades que observamos sean reactivas. Si una propiedad no es un proxy reactivo, el observador no funcionará como se espera. Por ejemplo, si observamos directamente una propiedad anidada dentro de un objeto, debemos retornar esa propiedad con una función anónima para transformarla en un proxy.

watch(
  () => productState.stock,
  (newValue) => {
    if (newValue <= 1) {
      productState.priceColor = 'red';
    }
  }
);

En este caso, stock es una propiedad dentro de un objeto reactivo, observado con una función anónima para asegurar su reactividad.

¿Cómo optimizar el uso de observadores en aplicaciones complejas?

Vue.js maneja propiedades reactivas como objetos, arreglos y funciones mediante proxies, lo que nos simplifica su observación. Sin embargo, para valores simples, como números y strings, es crucial utilizar métodos anónimos que devuelvan la propiedad deseada. Esto minimiza errores y maximiza la eficiencia de nuestros observadores.

Además, la observación profunda no es necesaria al trabajar con arreglos y objetos, ya que Vue.js observa automáticamente sus cambios internos.

watch(
  () => productState.cart,
  (newValue, oldValue) => {
    productState.total = newValue.reduce((total, item) => total + item.quantity * item.price, 0);
  },
  { deep: true }
);

La flexibilidad de Vue.js permite crear aplicaciones sofisticadas sin sacrificar rendimiento. Mientras desarrollas, recuerda que observar y manipular propiedades reactivas puede ser tedioso. En próximas lecciones, exploraremos cómo las propiedades computadas pueden simplificar este proceso y mejorar la eficiencia de tu aplicación.

Este conocimiento sólido sobre el uso de observadores en Vue.js te permitirá manejar estados de forma eficaz y construir aplicaciones web robustas. ¡Sigue aprendiendo y experimentando con la reactividad para impulsar tus habilidades como desarrollador!

Carlos Eduardo Gomez García

teacher•

Trataré de simplificar esto: . Para definir watchers en Composition API, usamos la función watch(), esta función recibe dos parámetros: .

Un objeto reactivo
En handler del watcher . Entonces, con objeto reactivo nos referimos a algo que Vue pueda hacer tracking (recordemos las bases de la reactividad), un objeto reactivo puede ser un Proxy, esto es porque, si recordamos las primeras clases, nosotros podíamos convertir en Proxys los objetos, y cada que intentábamos acceder a una propiedad de ese objeto podíamos interceptarlo con get. Pero los Proxys solo son fáciles de trabajar para reactividad con objetos (un JSON, un Arreglo, una función), pero son más complicados de trabajar con un valores planos (por ejemplo, un número o un string). . Es decir, imaginemos, ¿Cómo le aplicarías un Proxy a un objeto JSON? Fácil, le pasas dicho objeto al proxy, y pueden interceptar el get y el set porque tú puedes acceder y establecer propiedades dentro de un JSON, bien hasta ahí, pero ahora, ¿Cómo le aplicarías un proxy al número "0" por ejemplo? Es más dificl, no tienes un getter o un setter para ese tipo plano, no es un objeto que puedas acceder, es un tipo plano, por eso es que Watcher no acepta tipos planos. . Entonces, para solucionar esto, lo que hacemos es pasarle una función anónima que retorna ese tipo plano, una función sí puedes ser convertida en Proxy fácilmente, así que podemos acceder a sus getters y setters, y ya Vue hace el resto de la magia, es por eso que debemos mandar una función anónima en los watchers, así Vue puede convertirla en un Proxy y hacer su magia Vuetástica! . Dejo el código de esta clase: . https://github.com/RetaxMaster/vue3-platzi-commerce/tree/5437cefac6dbe4906e0f5fdb78a7854cffe0d9d6

Yefri Enmanuel Encarnación Jiménez

student•

muy bien explicado. Gracias!

Juan Esteban Galvis

student•

Entendí cómo utilizarlo, pero me quedaron 2 dudas:

¿Por qué retornar en una función anónima? esa parte no la entendí
¿Los Array son los únicos que no necesitan la función anónima? o también si es un Objeto? o cuáles valores no necesitan esto?

De resto excelente clase profe

Samuel Burbano

teacher•

Tomemos lo que habíamos visto en las clases de Proxy, tú puedes crear un proxy de cualquier objeto (aka Array, Objects, Functions, Class, etc), y cuando usas reactive en esencia lo que hace es crear propiedades reactivas, es decir que si hay un objeto de JavaScript (Array, Objeto, Función, etc) los va a crear como Proxy (ósea se pueden observar fácilmente), pero si una propiedad es un tipo plano (String, Number, etc) no se podrá observar fácilmente, por eso toca decirle al watcher que es algo plano que debe observar mediante una función anónima

Jaime Eduardo Falla Cardozo

student•

Para utilizar los watcher en composition API, debemos utilizar un elemento de Vue llamado watch en el componente app. Dentro de los parámetros de la función watch, debemos declarar una función anónima para obtener los valores de la propiedad reactiva

watch(() =>productoState.activeImage,(val,oldvalue)=>{}); al final de la función watcher de la propiedad observada, agregamos una propiedad llamada deep:true, que indica que se hará de una manera profunda. Esto lo utilizamos para los arreglos

Dany Pascual Gomez Sanchez

student•

Recorrido del cart con un ciclo:

watch(cartState.cart, (value, oldValue) =>{
                  var totalProds = 0;
                  cartState.cart.forEach(function(product) {
                      totalProds = totalProds + (product.price * product.quantityInCart);
                  })
                  cartState.totalProductos = totalProds;
              });
```watch(cartState.cart, (value, oldValue) =>{                  // console.log("value: " + value + " / oldValue:" + oldValue);                  var totalProds = 0;                  cartState.cart.forEach(function(product) {                      //console.log("quantityInCart: " + product.quantityInCart + " / Price:" + product.price);                      totalProds = totalProds + (product.price \* product.quantityInCart);                  })                  cartState.totalProductos = totalProds;                                });