Vue.JS Watch Property

Vue.JS es un marco JavaScript muy potente y reactivo, que se utiliza para construir UI (interfaces de usuario) y SPA (aplicaciones de una sola página). Se construye combinando las mejores características de los marcos Angular y React ya existentes. A los desarrolladores también les encanta codificar o construir aplicaciones en él.

Vue.JS proporciona la propiedad de reloj para observar y reaccionar a las variables o el cambio de datos. Podemos usar la propiedad de reloj para manipular el DOM cuando se cambia la variable observada. En este artículo, vamos a ver cómo podemos usar la propiedad Watch y realizar las tareas deseadas sobre el cambio de variable. Entonces empecemos.

Observadores

A observador en vue.JS actúa como un oyente de eventos a una variable o propiedad. Se utiliza para realizar varias tareas sobre el cambio de alguna propiedad específica. Es útil mientras hace tareas asincrónicas.

Demostrar y comprender el concepto del observador considerando un ejemplo.

Ejemplo:

Supongamos que estamos construyendo un sitio web de comercio electrónico, en el que tenemos una lista de artículos, y estamos construyendo un carro o componente de pago. En ese componente, necesitamos calcular la cantidad de un solo elemento con respecto al número de elementos.

Primero, asumimos algunas propiedades en los datos.

datos()
devolver
ArtemName: "Artículo 1",
itemQuantity: nulo,
ItemPrice: 200,
TotalPrice: 0

,

En el que veremos la propiedad "itemQuantity" y calcularemos el precio total. Primero haremos los enlaces de datos en la plantilla,

Antes de escribir el código para ver la variable y calcular el precio total.

Después de escribir este código, tendremos nuestra página web como esta:

Ahora, queremos cambiar el precio total en el cambio de "Elementa de elementos" como cuando el usuario cambia la cantidad utilizando el campo de entrada. El precio total debería cambiarse. Para ese propósito, tendremos que observar el "itemQuantity" y calcular el precio total cada vez que cambie la propiedad "itemQuantity".

Entonces, el observador de la "Elitsquantity" sería así:

mirar:
cantidad de objetos()
este.TotalPrice = esto.itemQuantity * esto.precio del articulo;
consola.Log (esto.cantidad de objetos);

Ahora, cada vez que el usuario cambia la "Elementa de elementos", el precio total se cambiará en un momento. Ya no tenemos que preocuparnos por nada. La propiedad del reloj se encargará de este cálculo ahora.

Echemos un vistazo a la página web:

Y, intentemos aumentar o cambiar la cantidad y ver algunos resultados:

Si cambiamos la cantidad, digamos "4", el precio total sería "800":

Del mismo modo, si cambiamos la cantidad a "7", el precio total sería "1400":

Entonces, así es como funciona la propiedad del reloj y ayuda en el desarrollo reactivo. La reactividad es una especie de firma de Vue.js. Además, la propiedad del reloj es útil mientras realiza operaciones asíncronas.

Conclusión

En este artículo, hemos aprendido cuál es una propiedad de reloj y cómo podemos usarla en Vue.js. También hemos probado un ejemplo de la vida real para comprender su verdadera implementación. Esto ayuda mucho a ahorrar tiempo y acelerar el proceso de desarrollo. Esperamos que haya encontrado este artículo útil y sigan visitando Linuxhint.com para una mejor comprensión.