Observadores Personalizados con Watchers en Vue.js

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

Dejo el rgb para lo que copien mas facilmente

"rgb(104, 104, 209)"

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

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.

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

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

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.