Vue.Propriété JS Watch

Vue.JS est un framework JavaScript très puissant et réactif, qui est utilisé pour créer des UIS (interfaces utilisateur) et des spas (applications à une page). Il est construit en combinant les meilleures fonctionnalités de frameworks angulaires et réagis déjà existants. Les développeurs adorent également coder ou y créer des applications.

Vue.JS fournit la propriété Watch pour observer et réagir aux variables ou changements de données. Nous pouvons utiliser la propriété Watch pour manipuler le DOM lorsque la variable regardée est modifiée. Dans cet article, nous allons voir comment nous pouvons utiliser la propriété Watch et effectuer les tâches souhaitées sur le changement de variable. Alors, commençons.

Observateurs

UN observateur en Vue.JS agit comme un auditeur d'événements d'une variable ou d'une propriété. Il est utilisé pour accomplir plusieurs tâches sur le changement d'une propriété spécifique. Il est utile en faisant des tâches asynchrones.

Voyons et comprenons le concept de l'observateur en considérant un exemple.

Exemple:

Supposons que nous construisons un site Web de commerce électronique, dans lequel nous avons une liste d'articles, et nous construisons un panier ou un composant de paiement. Dans ce composant, nous devons calculer la quantité d'un seul élément concernant le nombre d'éléments.

Tout d'abord, nous supposons certaines propriétés dans les données.

données()
retour
itemname: "Article 1",
Itemquantity: null,
ItemPrice: 200,
Totalprice: 0

,

Dans lequel nous surveillerons la propriété «Itemquantity» et calculerons le prix total. Nous ferons d'abord les liaisons de données dans le modèle,

Avant d'écrire le code pour regarder la variable et calculer le prix total.

Après avoir écrit ce code, nous aurons notre page Web comme celle-ci:

Maintenant, nous voulons modifier le prix total sur le changement de «standquantity» comme chaque fois que l'utilisateur modifie la quantité en utilisant le champ de saisie. Le prix total devrait être modifié. À cette fin, nous devrons regarder la «mesure des articles» et calculer le prix total chaque fois que la propriété «Itemquantity» est modifiée.

Ainsi, l'observateur de «Itemquantity» serait comme ceci:

montre:
itemQuantity ()
ce.TotalPrice = ceci.itemquantity * ceci.prix de l'article;
console.journal (ceci.itemquantity);

Maintenant, chaque fois que l'utilisateur change la «quantité », le prix total sera modifié dans un instant. Nous n'avons plus à nous soucier de quoi que ce soit,. La propriété Watch s'occupera de ce calcul maintenant.

Jetons un œil à la page Web:

Et essayons d'augmenter ou de modifier la quantité et de voir certains résultats:

Si nous modifions la quantité, disons «4», le prix total serait «800»:

De même, si nous changeons la quantité en «7», le prix total serait «1400»:

C'est donc ainsi que fonctionne la propriété Watch et aide au développement réactif. La réactivité est une sorte de signature de Vue.js. De plus, la propriété Watch est utile tout en effectuant des opérations asynchrones.

Conclusion

Dans cet article, nous avons appris ce qu'est une propriété Watch et comment nous pouvons l'utiliser dans Vue.js. Nous avons également essayé un exemple réel pour comprendre sa véritable implémentation. Cela aide beaucoup à gagner du temps et à accélérer le processus de développement. Nous espérons que vous avez trouvé cet article utile et continuez à visiter Linuxhint.com pour une meilleure compréhension.