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

   Une propriété:
  
    {{ message }}
  

 data: {
  message: 'Bonjour Vue! - Ceci est la version de Vue: '+ Vue.version,
  startupDate: new Date (). toLocaleString ()
} 

sera ajusté pour remplacer les deux propriétés par leurs valeurs réelles, produisant une sortie comme ceci:

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

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

La sortie serait alors être changé pour:

Une propriété: Salut

C'est la nature réactive de Vue: détecter automatiquement qu'une propriété a changé et re-rendre 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 cela en tapant ceci dans votre console:

 document.getElementById (" id1 "). textContent =" abc "
app.message // vérifier que le message n'a pas changé 

Il est intéressant de noter que vous pouvez également lier un élément HTML à une propriété de données en 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:

 document.getElementById ("id2"). TextContent = "{{message}}"; 

Utiliser les propriétés calculées

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

 {{computedProp}}  

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

 calculé: {
  computedProp: function () {
    // `this` pointe vers l'instance de l'application
    return "Heure de démarrage de l'application:" + this.startupDate +
      "- Heure d'exécution:" + new Date (). ToLocaleString () +
      "- Dépendance:" + this.dependency;
  }
} 

Cela produit la sortie suivante:

Propriété calculée: Heure de démarrage de l'application: 18/05/2018, 4:20:42 PM – Délai 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 heure est calculée 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 arrive:

1. computedProp dépend de la propriété data, dependency
2. un clic sur le bouton de mise à jour, un gestionnaire d'événements change la valeur de la propriété, dépendance
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 ordinateurProp est une personne à charge. 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:

 méthodes: {
  computedMessageFct: function () {
    return new Date (). toLocaleString ();
  }
} 

Nous l'utilisons comme ceci:

 {{computedMessageFct ()}}  

Remarquez l'opérateur () pour appeler la fonction.

Lorsque vous restituez l'échantillon page, properties.html vous remarquerez que span id = "id4" est mis à jour chaque seconde. 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'interface utilisateur se re-rend 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 doit être actualisé, avec le résultat de l'appel de la fonction une autre fois.

Conclusion

ê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'invoquera la propriété calculée que si l'une de ses dépendances a changé

Cependant, ce n'est pas le cas pour les méthodes de sortie vers 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 UI Kendo pour Vue notre bibliothèque de composants d'interface utilisateur qui vous aidera à créer de belles applications Vue rapidement.

Note de l'éditeur: Ce billet est initialement apparu sur le blog Progress . Consultez-le pour trouver d'autres contenus intéressants sur le développement de vos applications professionnelles.

---