Vue des structures profondes calculées

Lorsqu'il s'agit de calculer des types de données imbriqués ou profonds comme des tableaux ou des objets, Vue.js ou tout autre langage de programmation ne détecte pas automatiquement le changement hiérarchique dans les données. Cependant, nous savons tous que Vue.js fournit la surveillance et les propriétés calculées pour effectuer certaines variables de changement. Mais en ce qui concerne les modifications de données imbriquées, Vue.js ne détecte pas cela. Cet article apprendra à effectuer quelques modifications en observant les données imbriquées de tableaux ou d'objets.

Avant d'apprendre à regarder les données imbriquées dans Vue.js, commençons par comprendre comment fonctionne la propriété watch?

Regarder la propriété

La propriété watch est utilisée pour surveiller une variable et permet à l'utilisateur d'effectuer certaines tâches souhaitées sur le changement de la variable.

Exemple : Regarder une variable

Par exemple, au changement d'une variable, nous voulons consoler quelque chose. La syntaxe pour écrire un tel code dans Vue ressemblera à ceci :

Après avoir écrit le code ci-dessus, la page Web ressemblerait à ceci.

Si nous cliquons sur le bouton, l'état de la « boolVar » devrait être modifié en raison de l'attribut au clic du bouton, et la montre devrait automatiquement détecter le changement de « boolVar » et afficher la chaîne de message sur la console.

Cela a parfaitement fonctionné; le message "Bouton cliqué" s'affiche sur la console.

Mais, l'observateur ne parvient pas à détecter le changement et n'est pas renvoyé lorsqu'il s'agit de regarder les tableaux ou les objets. Voyons une démonstration de cela.

Exemple : observation d'un objet

Supposons que nous ayons un objet dans notre composant et que nous voulions afficher le changement qui s'est produit dans la propriété de l'objet. Dans l'exemple ci-dessous, j'ai créé un objet avec le nom de "objVar", qui contient deux paires clé-valeur, "item" et "quantity". J'ai créé un bouton où j'ajoute « 1 » à la quantité de la balise du modèle. Enfin, je regarde l'objet "objVar" dans la propriété watch et j'affiche un message de console.

Maintenant, ce code est censé afficher le changement dans la quantité de l'objet. Mais, lorsque nous exécutons le code et cliquons sur le bouton sur la page Web :

Vous pouvez voir dans le gif ci-dessus; rien ne se passe dans la console.

La raison derrière cela est que l'observateur ne regarde pas profondément dans les valeurs des objets, et c'est le vrai problème que nous allons résoudre maintenant.

Vue.js fournit la propriété deep pour regarder en profondeur les valeurs des objets et des tableaux. La syntaxe pour utiliser la propriété deep et surveiller les données imbriquées est la suivante :

Dans cette syntaxe, nous avons défini la propriété deep sur true et réorganisé la fonction handler().

Maintenant, après avoir modifié le code, si nous rechargeons la page Web et cliquons sur le bouton :

Ici vous pouvez voir que l'observateur fonctionne et affiche le message dans la console.

Conclusion

Après avoir lu ce post, regarder et calculer des structures de données profondes ou imbriquées dans Vue.js n'est plus difficile. Nous avons appris à observer le changement d'une valeur dans un objet ou un tableau et à exécuter certaines tâches à l'aide de la propriété "deep" de Vue.js.