Observadores Personalizados con Watchers en Vue.js

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

Resumen

¿Cómo crear observadores o "watchers" personalizados en Vue?

Vue, a través de su Options API, nos ofrece la herramienta necesaria para crear lo que se denominan "watchers" u observadores personalizados. Estos nos permiten detectar y reaccionar a cambios en propiedades reactivas en tiempo real. Vamos a explorar cómo puedes crear y utilizar estos observadores de manera efectiva en tus aplicaciones Vue.

El objetivo es cambiar automáticamente el color de nuestro elemento de precio basado en la cantidad de productos en stock.

¿Cómo asociar propiedades de estilo con el data?

Para empezar a trabajar con los estilos dinámicos, primero se debe crear una propiedad dentro del objeto data en Vue. Supongamos que queremos cambiar el color de un texto en función del stock disponible de un producto. Tenemos que crear una propiedad llamada priceColor y asignarla inicialmente a un valor RGB.

data() {
  return {
    priceColor: 'rgb(0, 0, 255)' // Un color azul por defecto
  };
}

¿Cómo observar cambios en las propiedades reactivas?

Los observadores permiten ofrecer respuestas automáticas ante cambios en las dependencias. Al crear un watcher, especificamos la propiedad que se debe vigilar. Aquí se usa la API de options para monitorear cambios en el stock del producto.

watch: {
  'product.stock': function(newValue, oldValue) {
    console.log(newValue); // Imprime el stock actual en consola
    if (newValue <= 1) {
      this.priceColor = 'rgb(255, 0, 0)'; // Cambia el color a rojo si el producto está escaso
    }
  }
}

¿Qué ocurre al utilizar el objeto de carrito con un watcher más avanzado?

La funcionalidad reactiva de Vue no solo se limita a cambios simples. También puedes monitorear arreglos complejos, como un carrito de compras, e implementar acciones cada vez que se añaden productos.

watch: {
  cart: {
    handler(newCart) {
      this.total = newCart.reduce((total, product) => {
        return total + product.price * product.quantity;
      }, 0);
    },
    deep: true // Observa cambios profundos en los objetos del carrito
  }
}

El uso de deep: true en este escenario se encarga de monitorear cada objeto y sub-propiedad dentro del array, asegurando que el total se actualice correctamente cada vez que los productos en el carrito cambian de alguna manera.

¿Cómo podemos utilizar la internacionalización para formatear el valor total?

Además de cambiar el producto mediante observadores, puedes usar herramientas como la internacionalización de JavaScript para dar formato monetario al total de las compras:

computed: {
  formattedTotal() {
    return new Intl.NumberFormat('es-CO', { style: 'currency', currency: 'COP' }).format(this.total);
  }
}

Esto convierte automáticamente el total numérico en un formato de moneda estandarizado, mejorando la experiencia del usuario con la interfaz.

Con estos pasos, no solo puedes crear aplicaciones interactivas, sino también reaccionar de manera eficiente a los cambios en los datos, ofreciendo una interfaz de usuario reactiva y dinámica. Aprovecha estas herramientas para enriquecer tus proyectos en Vue y brindar una experiencia única a los usuarios. ¡Sigue explorando las posibilidades que Vue tiene para ofrecer!

Carlos Eduardo Gomez García

teacher•

Yo conocí el handler() y el deep gracias a una chapuza que estaba haciendo con Vue xD . Un watcher, como su nombre lo indica, va a estar observando por cambios dentro de la variable (u objeto) que le pasemos, es decir, en cuanto este cambie, automáticamente se va a ejecutar el código que pongamos dentro y podemos modificar el estado de nuestra aplicación.

El handler() y el deep son básicamente otra forma de definir watchers en Vue, pero pasándole más opciones, ese deep indica que no importa qué tan profundo sea un cambio, el handler se va a disparar (el handler es toda la lógica de nuestro watcher). Por ejemplo:

const algo = [
	[
		{
			algoProfundo: {
				algoMasProfundo: 1
			}
		}
	]
]

En esta variable, vemos que tenemos una propiedad llamada algoMasProfundo que está dentro de un objeto que está dentro de otro objeto que está dentro de un arreglo que está dentro de otro arreglo, a eso se le llama "profundidad", por lo que si definimos el deep en el watcher, si llega a cambiar ese algoMasProfundo en algún momento, Vue se dará cuenta y reaccionará a ese cambio mediante el handler(), eso es lo increíble de Vue:D . Dejo el código de esta clase: . https://github.com/RetaxMaster/vue3-platzi-commerce/tree/433aaa90b3c963bbd4299b3efb56d0df05a6ec78

Sebastián Buitrago

student•

Dejo el rgb para lo que copien mas facilmente

"rgb(104, 104, 209)"

Sebastián Buitrago

student•

aqui esta el otro no lo habia visto

"rgb(188, 30, 67)"

Juan Esteban Galvis

student•

Excelente clase, me confundí un poco con lo de handler y depp entonces dejo mis apuntes y agradecería si están correctos o entendí mal ajaja (Y en caso que estén bien pues que les sirva jaja)

En caso de ser una estructura muy compleja utilizamos:

watch: {
// Observar cambios sobre cart que tiene productos
    cart: {
      handler(cart) {
	// Generaar total mediante reduce
        this.total = cart.reduce((prev, curr) => {
        const prevPrice = prev.price || prev;
        const prevQuantity = prev.quantity || 1;
        return prevPrice * prevQuantity + curr.price * curr.quantity;
        }, 0);
      },
	// Autorizar la búsqueda más profunda
      deep: true
    }
  }
}

En este caso vamos a observar Cart (Carrito de compras) que contiene varios elementos Product por ello:

Usamos deep: true para escuchar a profundidad
Función handler(valor){} para generar los procedimientos al ocurrir un cambio

Samuel Burbano

teacher•

El ‘deep’ es para decirle a Vue que observe reactivamente a las propiedades más profundas del objeto, si nos fijamos el arreglo de cart tiene dentro objetos y estos objetos a su vez tienen propiedades como price o quantity. Si queremos que Vue ejecute el handler de este watcher si esas propiedades súper internas cambian, tenemos que ponerle deep: true. De lo contrario Vue solo observará los primeros niveles.

Jaime Eduardo Falla Cardozo

student•

Los watcher nos permiten observar los valores de una propiedad reactiva. Una función dentro del watcher, recibe 2 parámetros que son: el valor actual y el valor anterior. También se pueden agregar watcher a una propiedad de un objeto, para ello se define el nombre del watcher como un string y el nombre corresponde a la propiedad que queremos observar.

También podemos definir un watcher sobre un objeto y lo definimos con la función handler, esto generalmente lo hacemos para las propiedades que son arreglos de objetos donde queremos observar cada uno de los objetos del arreglo.

Jaime Eduardo Falla Cardozo

student•

Los Watchers nos permiten gestionar las dependencias que automáticamente gestiona Vue

Cristian David Sierra Barrera

student•

Comparto documentación del Reduce de Javascript para recordar: [https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce](Documentacion MDN)

Andrea Estefania Blanco Avila

student•

tengo una consulta, ``` prevPrice

 no debería ser let en lugar de const ?

Samuel Burbano

teacher•

Hola Andrea, en este caso prevPrice nunca se reasigna, por eso la definimos como const

Alvaro Gabriel Gomez Andazol

student•

primera vez en mi vida que veo una funcion que su nombre es un string entre comillas

"product.stock"() {

}

Angel Fernando Quiroz Campos

student•

Es como cuando la gente descubre las variables variables de PHP https://www.php.net/manual/en/language.variables.variable.php

Marlon Javier Velasquez Peña

student•

He leído que reduce es el último recurso a utilizar, por otro lado es bastante confuso de entender. No sé si esto es más sencillo de entender

&#x20; watch: {    cart: {      handler() {        this.cart.forEach((element) => (this.totalPrice += element.price))      },      deep: true,    },  },

Ameth Ordoñez Erazo

student•

Una forma más simplificada de usar el reduce en el handler para obtener el total del carrito:

 this.totalCarrito = newValue.reduce((sum, item) => {
                return item.price * item.quantity + sum;
              }, 0);

Miguel Angel Reyes Moreno

student•

Desde la perspectiva de un usuario, me parece mala idea poner en rojo en precio siendo que quedan pocos productos, refuerza el precio y quizás me haga no querer hacer ese gasto. En cambio, opté por mejor poner en rojo el texto "¡Queda solamente 1 producto!", pues da sentido de urgencia a las pocas existencias. Estos pequeños detalles son muy importantes para un e-commerce.