Introducción: fundamentos de Vue.js

1

Desarrollo de Aplicaciones Web con Vue.js 3

2

Fundamentos de Vue JS: Construyendo Aplicaciones Reactivas

3

Vue.js: Framework Progresivo y Reactivo para Aplicaciones Web

4

Aplicación Básica con JavaScript y Renderizado Declarativo

5

Capa Declarativa y Virtual DOM en Vue.js

Reactividad a profundidad

6

Paradigma de Reactividad: Conceptos y Aplicaciones Prácticas

7

Creación de Framework Reactivo con Proxies en JavaScript

8

Creación de un Mini Framework Reactivo desde Cero

9

Programación Reactiva con Proxies en JavaScript

10

Uso de Reflect para Simplificar Proxies en JavaScript

11

Programación Reactiva: Efectos, Track y Trigger en JavaScript

12

Reactividad en JavaScript: Efectos, Trackers y Triggers

Templates de Vue.js

13

Templates de HTML en Vue.js: Mejores Prácticas Esenciales

14

Implementación de Vue.js en Proyecto eCommerce Reactivo

15

Expresiones

16

Atributos Dinámicos en Vue.js: Uso de Clases y Estilos Reactivos

17

Rendering Condicional en View.js: Uso de v-show y v-if

18

Renderizado de Listas en HTML con VueJS

19

Eventos y Dinamismo en Templates HTML con Vue JS

APIs internas de Vue.js

20

Options API vs. Composition API

21

Diferencias entre Options API y Composition API en Vue.js

22

Creación de Métodos Personalizados con Vue JS Options API

23

Creación de Métodos Personalizados con Composition API en Vue.js

24

Uso de Reactive para Agrupar Estados en Composition API

Segunda capa: componentes de Vue.js

25

Creación de Componentes en Vue para Aplicaciones Modulares

26

Conexión de Datos entre Componentes en VueJS: Usando Props y Composition API

27

Creación de Componentes Personalizados en Aplicaciones Web

28

Creación de Eventos Personalizados en Vue para Comunicación entre Componentes

29

Eventos personalizados con Composition API en Vue.js

30

Observadores Personalizados con Watchers en Vue.js

31

Creación de Observadores Personalizados en Vue Composition API

32

Propiedades Computadas en Vue: Simplificación y Dinámica Reactiva

33

Propiedades Computadas con Composition API en Vue.js

34

Ciclos de Vida en Vue.js: Uso Práctico y Carga de Datos desde API

35

Ciclos de Vida en Composition API de Vue.js

Siguientes pasos

36

Desarrollo de Frontend para Ecommerce con Vue.js 3

37

Reactividad y Programación en Vue: Efectos y Ciclos de Vida

No tienes acceso a esta clase

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

Observadores Personalizados con Watchers en Vue.js

30/37
Recursos

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

Aportes 9

Preguntas 2

Ordenar por:

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

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.

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

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

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 ``` watch: { cart: { handler() { this.cart.forEach((element) => (this.totalPrice += element.price)) }, deep: true, }, }, ```

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.