Un regard sur les propriétés réactives de Vue

Le framework Vue JavaScript est "réactif", ce qui signifie qu'il peut actualiser automatiquement vos données. Apprenez comment vous pouvez tirer parti de cela dans vos applications.

Les applications web modernes doivent rendre les données dynamiquement dans divers éléments HTML. Divers frameworks comme jQuery, React, Angular ou Vue fournissent des mécanismes spécifiques pour répondre à cette exigence et simplifier la vie d'un programmeur avec des fonctionnalités de haut niveau. En particulier, le cadre Vue fournit un mécanisme réactif pour afficher ces données, et surtout, un mécanisme pour prendre soin de rafraîchir automatiquement l'interface utilisateur " si nécessaire."

Cela soulève la question : que signifie "au besoin"? Lisez la suite pour avoir une explication.

Comment fonctionne le système de réactivité des vues

Vue fournit trois types de propriétés pour rendre les données à l'intérieur des éléments HTML d'une manière dite réactive. Ce sont:

• Propriétés
• Propriétés calculées
• Méthodes

Il est important de comprendre comment Vue traite chacun d'eux et en particulier comment ils les mettent en cache, car cela aura un impact sur la fréquence et le moment

Dans cet article, nous examinerons (via un exemple ) comment utiliser les propriétés de données, les propriétés calculées et les méthodes, ainsi que les différences entre chacune d'entre elles en termes de mise en cache.

Pour suivre, juste téléchargez ce fichier HTML à partir de Github . Cet exemple est autonome (il contient à la fois le code HTML et le code Javascript ainsi que des références à toutes les dépendances requises.)

Utilisation d'une propriété de données

Le premier mécanisme de rendu des données dans votre page consiste à utiliser une donnée

Dans la première partie du fichier HTML, nous utilisons deux propriétés: startupDate et message

Elles sont définies lors de l'initialisation de l'objet Vue avec un objet de données littéral comme ceci:

En cours d'exécution -time, l'élément div sera ajusté pour remplacer les deux propriétés avec leurs valeurs réelles, produisant une sortie comme ceci:

Une propriété: Hello Vue! – Ceci est Vue version: 2.5.16

À ce stade, vous pouvez aller à la console du navigateur et entrer quelque chose comme: app.message = "Salut"

La sortie serait alors changée en:

Une propriété: Hi

C'est la nature Réactive de Vue: détecter automatiquement qu'une propriété a changé et rendre à nouveau l'élément affecté. Ceci est également appelé liaison de données unidirectionnelle pour indiquer que l'élément est lié à la valeur d'une propriété. Il est lié d'une façon, c'est-à-dire dans la direction des données Vue vers l'intervalle avec id = "id1". Ce n'est pas lié dans l'autre sens. Par exemple, si vous essayez de modifier le contenu de cette partie via Javascript, cela ne changera pas le contenu de la variable de données.

Vous pouvez vérifier ceci en tapant ceci dans votre console:

De manière intéressante, vous pouvez également lier un élément HTML à une propriété de données utilisant JavaScript tant que vous le faites avant la création de l'objet Vue. C'est ce que nous faisons pour étendre id = "id2" avec ce code:

Utilisation de propriétés calculées

La deuxième façon de rendre certaines données consiste à utiliser propriétés calculées. Vous l'utilisez exactement comme une propriété de données. Par exemple:

Sa définition est différente cependant: la propriété est définie comme une fonction dans l'objet littéral calculé de l'objet Vue. Par exemple:

Cela produit la sortie suivante:

Propriété calculée: Heure de démarrage de l'application: 18/05/2018, 16:20:42 – Heure d'exécution: 18/05/2018, 4:20:42 PM – Dépendance : Je suis une propriété de dépendance

la deuxième date et l'heure sont calculées au moment de l'exécution de la fonction. Lors de l'affichage initial, les deux dates et heures sont identiques car l'heure de création de l'objet Vue et le rendu ont eu lieu à peu près en même temps.

Une propriété calculée peut être réexécutée si l'une de ses dépendances a changé. C'est exactement ce qui se passe lorsque l'on clique sur le bouton "Update Dependency". Maintenant, nous obtenons une sortie où les deux dates et heures sont différentes:

Propriété calculée: Heure de démarrage de l'application: 18/05/2018, 16:20:42 – Temps d'exécution: 18/05/2018, 4 : 34: 04 PM – Dépendance: Nouvelle valeur 1 pour la propriété de dépendance

Voici ce qui se passe:

1. computedProp dépend de la propriété data "dependency".
2. Lorsque vous cliquez sur le bouton update, un événement handler modifie la valeur de la propriété "dependency".
3. Vue détecte que la propriété de données "dependency" a changé, vérifie sa liste de dépendances pour cette propriété et trouve que la propriété calculée est dépendante. Par conséquent, il exécute de nouveau la propriété calculée

Using Methods

La troisième façon de rendre certaines données est de sortir le résultat d'un appel de fonction dans une méthode.

Une méthode est définie dans l'objet Vue les méthodes objet littéral. Par exemple:

Nous utilisons les formes suivantes:

Notez que l'opérateur () appelle la fonction. .

Lorsque vous affichez la page exemple, properties.html, vous remarquerez que span id = "id4" est mis à jour toutes les secondes. C'est bizarre, nous ne faisons pas d'appels supplémentaires à cette fonction. Hmm, qu'est-ce qui se passe?

La raison pour laquelle il est mis à jour chaque seconde est que la fonction computedMessageFct est invoquée chaque fois que l'ui est rendu de nouveau indépendamment des dépendances. Dans notre cas, il a été appelé toutes les secondes car la propriété clock provoque une mise à jour de l'interface utilisateur toutes les secondes. En d'autres termes, même si computedMessageFct ne dépend pas d'autres propriétés, Vue considère toujours que span id = "id4" doit être actualisé, avec le résultat d'appeler la fonction une autre fois.

Conclusion

Il est important d'être conscient qu'une fonction de propriété calculée peut être invoquée plusieurs fois, et faire attention aux effets secondaires ou aux implications de performance que cela peut avoir. Heureusement pour nous, le framework Vue met en cache les résultats de ces appels de fonction et n'appellera la propriété calculée que si l'une de ses dépendances a changé.

Cependant, ce n'est pas le cas des méthodes utilisées pour les éléments HTML. Ils seront invoqués à nouveau chaque fois que l'interface utilisateur doit être rendue. Alors soyez prudent avec le genre de calcul que vous faites dans ces fonctions. Nous pourrions penser que nous devrions simplement utiliser les propriétés calculées et éviter les méthodes, mais l'un des avantages des méthodes par rapport aux propriétés calculées est que nous pouvons passer des paramètres. Une fois conscients des avantages et des inconvénients de chaque type, vous pouvez choisir le chemin dont vous avez besoin pour vos applications.

Et si vous travaillez avec Vue, n'oubliez pas de consulter Kendo UI for Vue notre bibliothèque de composants de l'interface utilisateur qui vous aidera à créer rapidement de belles applications Vue.