Vue Structures profondes calculées

En ce qui concerne le calcul de 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 des données. Cependant, nous savons tous que Vue.JS fournit la montre et les propriétés calculées pour effectuer certaines variables de changement. Mais quand il s'agit de changements de données imbriquées, Vue.JS ne détecte pas cela. Ce message apprendra à effectuer des changements en regardant les données imbriquées des tableaux ou des objets.

Avant d'apprendre à regarder les données imbriquées à Vue.JS, comprenons d'abord comment fonctionne la propriété Watch?

Regarder des biens

La propriété Watch est utilisée pour regarder une variable et permet à l'utilisateur d'effectuer certaines tâches souhaitées sur la modification de la variable.

Exemple: regardez une variable

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

Après avoir écrit le code ci-dessus, la page Web serait comme ça.

Si nous cliquons sur le bouton, l'état du «Boolvar» doit être modifié en raison de l'attribut de clic du bouton, et la montre doit détecter automatiquement 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 licencié lorsqu'il s'agit de regarder les tableaux ou les objets. Voyons une démonstration de cela.

Exemple: regarder un objet

Supposons que nous ayons un objet dans notre composant, et nous voulons 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 de valeurs clés, «élément» et «quantité». J'ai créé un bouton où j'ajoute «1» à la quantité de la balise de modèle. Enfin, je regarde l'objet «Objvar» dans la propriété Watch et affiche un message de console.

Maintenant, ce code est censé afficher le changement de la quantité de l'objet. Mais, lorsque nous exécutons le code et cliquez sur le bouton de 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 ressemble pas profondément dans les valeurs des objets, et c'est le vrai problème auquel nous allons résoudre maintenant.

Vue.JS fournit la propriété profonde pour regarder profondément dans les valeurs des objets et des tableaux. La syntaxe pour utiliser la propriété profonde et regarder les données imbriquées sont les suivantes:

Dans cette syntaxe, nous avons réglé la propriété profonde sur True et réorganisé la fonction Handler ().

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

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

Conclusion

Après avoir lu cet article, regarder et calculer les structures de données profondes ou imbriquées dans Vue.JS n'est plus difficile. Nous avons appris à regarder le changement d'une valeur dans un objet ou un tableau et à exécuter certaines tâches à l'aide de la propriété «profonde» de Vue.js.