Vue.js For Beginner / Pour Débutant(Part. 6) ✅ 2019 | EN/FR 😅

Part. 6 : Différence entre propriétés calculées et observateurs (Computed/Watch)

🚁La partie 5 est ici tandis que cette partie est disponible en anglais ici

Dans cette partie nous allons voir une notion très importante en Vue.js, pour être précis ce sont même 2 notions (qui se ressemble un peu, et qu’on a du mal à différencier si on apprend mal leur utilisation) : ce sont les propriétés calculées ainsi que les observateurs

Commençons par les propriétés calculées

Comme on a pu le voir dans une précédente partie, il est possible d’utiliser les valeurs de notre composant (data) dans le <template> de notre composant avec l’extension .vue

Cette méthode fonctionne mais elle n’est viable que lorsque notre logique métier (c’est à dire les diverses opérations effectuées sur cette variable) sont minimes. Comme inverser une chaîne, la mettre en majuscule, concaténer une chaîne avec une autre..etc.

A partir du moment où cela devient plus compliqué (comme découpé une chaîne, effectuer des conversions de date, traité les données provenant d’une API et effectue un filtre dessus grâce à filter) et qu’il est nécessaire de réfléchir un peu pour comprendre ce que la variable permet d’afficher c’est que vous avez besoin d’une propriété calculée

La propriété calculée se présente de la même manière dans notre template, un petit exemple d’appel :

Pour une propriété simple :

<template>
   <div>
        <p> Message : {{ msg }} </p>
   </div>
</template>

Pour une propriété calculée :

<template>
   <div>
        <p> Message avec propriété calculée: {{ msgCalcule }} </p>
   </div>
</template>

La vrai question est donc comment cela fonctionne t il ?
Tout d’abord effectuons un petit rappel sur la structure de notre composant vue

Comme on a pu le voir dans une précédente partie, Vue.js met à disposition des “hooks” pour effectué des actions sur le cycle de vie de l’application. Pour l’instant nous n’allons pas entrer dans les détails, mais sachez que ces éléments, comme les fonctions tout comme les propriétés calculées se déclarent au même niveau comme vous pouvez le voir sur le screenshot ci-dessus

Si vous êtes observateur, les propriétés calculées sont dans cet exemple, il s’agit des computed

Commençons par déclarer notre premier computed

Dans cet exemple, on déclare un computed nommé “onlyFirstWord” qui comme son nom l’indique est chargé de retourner uniquement le premier mot de notre variable msg (en mettant ce mot en majuscule)

Il est donc très facile de l’utiliser maintenant grâce à l’accesseur this de notre composant (qui correspond non pas à l’instance de vue, mais à l’instance du composant)
Si nous étions dans la classe où l’on déclare notre instance de vue :

const vm = new Vue ({
  data: {
    msg: "hello world"
  }
})

A ce moment là le computed (s’il était déclaré) serait accessible via vm.onlyFirstWord

Utilisons le dans notre template :

Pour cela c’est un peu différent, comme pour les data, il n’est pas nécessaire d’utiliser le this, vous pouvez directement passer le nom du computed dans les moustaches comme ceci :

La vraie question : Auront on pu faire une méthode dans “methods” qui aurait donné le même résultat? La réponse est OUI. Mais non.. Je m’explique

L’intérêt de Computed est qu’il est mis en cache. Ses propriétés sont par contre “ré-évaluées” si l’une des dépendances change. C’est à dire, que par exemple, dans notre test ci dessous, si la variable “msg” est modifié, le computed va être ré évalué et sera ainsi modifier. Si nous avions utilisé “methods” peu importe le nombre de modifications de “msg”, notre méthode n’aurait jamais été modifier

Un exemple assez parlant et que j’utilise beaucoup ses temps si est :

• Nous avons un computed A qui faire un forEach sur un tableau de 100 éléments (des chaines de caractère) pour ne garder que ce qui l’intéresse (celle qui ne comportent pas d’espace par exemple.
• Nous avons un computed B qui se base sur le computed A pour par exemple rajouter à chaque élément un ID dynamique à la suite de notre chaîne

L’intérêt ici d’utiliser des computed est que leurs propriétés sont mises en cache. Ce qui permet d’effectuer des traitements lourds sans devoir tout recalculer à chaque fois
Mais si vous ne voulez pas de cette fonctionnalité: Privilégiez les methdos

Les observateurs

Quand vous lisez “observateur” vous vous dites surement que c’est déjà ce que l’on fait : Vérifier qu’une donnée à changer pour effectuer un rafraîchissement grâce aux computed. En fait c’est plus compliqué que ça. Vue met à disposition une manière plus générale d’observer un changement de données sur une instance. C’est ce que l’on appelle la propriété “watch”

La grosse différence est que contrairement à un computed qui renvoie directement une valeur d’après une modification. Watch permet de modifier une valeur précise. Prenons un exemple tout bête :

data() {
  return {
     hello : "Hello",
     word : "Word",
     fullText: "Hello Word",
   }
},
watch:{ 
  hello: function (value) {
     this.fullText=  value + ' ' +  word
  },
  word: function (value) {
      this.fullText = this.hello + ' ' + value
  }

Ce qui est très bien en soit, mais par exemple dans ce cas là (comme dans pas mal de cas à vrai dire..) un computed est largement suffisant et plus rapide à implémenter je trouve :

data() {
  return {
     hello : "Hello",
     word : "Word",
     fullText: "Hello Word",
   }
},
computed: {
  fullText () {
    return this.hello + ' ' + this.word
  }
}

Sachez qu’il est également possible de passer des paramètres à un Computed en utilisant une fonction, ce n’est pas une méthode que je trouve très jolie, mais c’est assez pratique dans certains cas lorsqu’on est bloqué

<script>
export default {
data() {
  return {
     hello : "Hello"
     word: "Word"
   }
},
computed: {
  longText() {
     return function fulltext(mot) {
       return this.hello + ' ' + mot
     }
  }
}
}
</script>
<template>
  <div>
       <p> {{ longText(word) }}  </p>
  </div>
</template>

Le plus pratique quoi qu’il en soit est de passer par ce que l’on appelle des Mutateurs vous en avez surement déjà entendu parlé, il s’agit du GETTER et du SETTER (pour “récupérer” et “définir”)

computed: {
 fullText: {
 // GETTER
  get: function () {
   return this.hello + ' ' + this.word
  }
// SETTER
  set: function (newValue) {
       const newHelloWord= newValue.split(' ' ) 
       this.hello= newHelloWord[0]     
       this.word= newHelloWord[newHelloWord.length — 1] 
  }
 } 
}

Cet exemple reprend un peu celui de la documentation officielle de Vue.js

On voit ici la manière simple du Getter de récupérer notre computed comme nous l’avons déjà fait précédemment. Et dans le Setter on peut voir comment il est possible en passant un mot en paramètre du computed de modifier celui-ci en utilisant par exemple la syntaxe :

this.fullText = "Premier mot"

Merci d’avoir lu cette partie❤️

Vous pouvez retrouver toutes les parties de ce “gros tutoriel” sur Vue.js sur mon profil

N’hésitez pas à me contacter sur LinkedIn ou par mail à thibault.jeanpierre.dev@gmail.com en cas de problème

La prochaine partie arrive bientôt 😃