Computed vs methods

Les propriétés calculées : computed

  • Les fonctions du groupe methods sont recalculées à chaque appel de render.
  • Les fonctions du groupe computed ne sont réévaluées que lorsque une de leur dépendance est modifiée. Ce sont des propriétés calculées mises en cache.

Un exemple de propriété calculée:

<template>
      <!-- LA PROPRIETE nomAffiche EST CALCULEE A PARTIR DES props: nom ET prenom -->
      <p>{{ nomAffiche}}</p>
      <!-- LA PROPRIETE somme EST CALCULEE A PARTIR DES data: x ET y -->
      <p><input type="number" v-model="x"/> + <input type="number" v-model="y"> = {{ somme}} </p>
</template>
<script>
export default {
    props:{
        nom:{
            type: String
        },
        prenom:{
            type: String
        }
    },
    data(){
        return{
            x:5,
            y:7
        }
    },
    computed:{
        //Mis en cache et recalculé uniquement si prenom ou nom change
        nomAffiche: function(){
            return this.prenom + ' ' + this.nom;
        },
        somme: function(){
            return parseInt( this.x) + parseInt( this.y);
        }
    }  
}
</script>

Les observateurs : watch

Les observateurs permettent d'effectuer des actions lorsqu'une “data” est modifiée. Il faut toujours se demander si une propriété computed ne serait pas plus adaptée.

Sur notre exemple précédent, on peut ajouter une data deltaX qui enregistre la variation de la variable x.

On ajoutera alors l'observateur sur x :

    watch: {
      x: function( newX, oldX){
          this.deltaX = newX - oldX;
      }
    }