Méthode vs calculée dans Vue

Quelle est la principale différence entre une méthode et une valeur calculée dans Vue.js?

Ils se ressemblent et sont interchangeables.

Les valeurs et méthodes calculées sont très différentes dans Vue et ne sont certainement pas interchangeables dans la plupart des cas.

Propriété calculée

Un nom plus approprié pour une valeur calculée est une propriété calculée . En fait, lorsque la Vue est instanciée, les propriétés calculées sont converties en une propriété de Vue avec un getter et parfois un setter. Fondamentalement, vous pouvez considérer une valeur calculée comme une valeur dérivée qui sera automatiquement mise à jour chaque fois qu'une des valeurs sous-jacentes utilisées pour la calculer est mise à jour. Vous n'appelez pas de calcul et il n'accepte aucun paramètre. Vous référencez une propriété calculée comme vous le feriez pour une propriété de données. Voici l'exemple classique de la documentation :

computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

Qui est référencé dans le DOM comme ceci:

<p>Computed reversed message: "{{ reversedMessage }}"</p>

Les valeurs calculées sont très précieuses pour manipuler les données qui existent sur votre Vue. Chaque fois que vous souhaitez filtrer ou transformer vos données, vous utilisez généralement une valeur calculée à cette fin.

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.names.filter(n => n.startsWith("B"))
    }
}

<p v-for="name in startsWithB">{{name}}</p>

Les valeurs calculées sont également mises en cache pour éviter de calculer de manière répétitive une valeur qui n'a pas besoin d'être recalculée lorsqu'elle n'a pas changé (car elle peut ne pas être dans une boucle par exemple).

Méthode

Une méthode est simplement une fonction liée à l'instance Vue. Il ne sera évalué que lorsque vous l'appelez explicitement. Comme toutes les fonctions javascript, il accepte les paramètres et sera réévalué à chaque appel. Les méthodes sont utiles dans les mêmes situations, toute fonction est utile.

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.startsWithChar("B")
    },
    startsWithM(){
        return this.startsWithChar("M")
    }
},
methods:{
    startsWithChar(whichChar){
        return this.names.filter(n => n.startsWith(whichCharacter))
    }
}

La documentation de Vue est vraiment bonne et facilement accessible. Je le recommande.

Comme @gleenk a demandé un exemple pratique pour mettre en évidence les différences de cache et de dépendance entre les méthodes et les propriétés calculées, je vais montrer un scénario simple:

app.js

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },
    methods: {
        addToAmethod: function(){
            console.log('addToAmethod');
            return this.a + this.age;
        },
        addToBmethod: function(){
            console.log('addToBmethod');
            return this.b + this.age;
        }
    },
    computed: {
        addToAcomputed: function(){
            console.log('addToAcomputed');
            return this.a + this.age;
        },
        addToBcomputed: function(){
            console.log('addToBcomputed');
            return this.b + this.age;
        }
    }
});

Ici, nous avons 2 méthodes et 2 propriétés calculées qui effectuent la même tâche. Les méthodes addToAmethod& addToBmethodet les propriétés calculées addToAcomputed& addToBcomputedajoutent toutes +20 (c'est-à-dire la agevaleur) à soit aou b. En ce qui concerne les méthodes, elles sont toutes deux appelées chaque fois qu'une action a été effectuée sur l' une des propriétés répertoriées, même si les dépendances d'une méthode spécifique n'ont pas changé. Pour les propriétés calculées, le code est exécuté uniquement lorsqu'une dépendance a changé; par exemple, l'une des valeurs de propriété spécifiques qui fait référence à A ou B déclenchera addToAcomputedou addToBcomputed, respectivement.

La méthode et les descriptions calculées semblent assez similaires, mais comme @Abdullah Khan l'a déjà spécifié , ce n'est pas la même chose ! Essayons maintenant d'ajouter du html pour tout exécuter ensemble et voir où se trouve la différence.

Démo de cas de la méthode

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },
    methods: {
        addToAmethod: function(){
            console.log('addToAmethod');
            return this.a + this.age;
        },
        addToBmethod: function(){
            console.log('addToBmethod');
            return this.b + this.age;
        }
    }
});

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>VueJS Methods - stackoverflow</title>
            <link href="style.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
    
        </head>
        <body>
            <div id="vue-app">
                <h1>Methods</h1>
                <button v-on:click="a++">Add to A</button>
                <button v-on:click="b++">Add to B</button>
                <p>Age + A = {{ addToAmethod() }}</p>
                <p>Age + B = {{ addToBmethod() }}</p>
            </div>
        </body>
        
        <script src="app.js"></script>
    </html>

Le résultat expliqué

Quand je clique sur le bouton "Ajouter à A" , toutes les méthodes sont appelées (voir le résultat de l'écran du journal de la console ci-dessus), le addToBmethod()est également exécuté mais je n'ai pas appuyé sur le bouton "Ajouter à B" ; la valeur de propriété qui fait référence à B n'a pas changé. Le même comportement se produit si nous décidons de cliquer sur le bouton "Ajouter à B" , car encore une fois, les deux méthodes seront appelées indépendamment des changements de dépendance. Selon ce scénario, c'est une mauvaise pratique car nous exécutons les méthodes à chaque fois, même lorsque les dépendances n'ont pas changé. Cela consomme vraiment beaucoup de ressources car il n'y a pas de cache pour les valeurs de propriété qui n'ont pas changé.

Démonstration du cas de propriété calculée

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },

    computed: {
        addToAcomputed: function(){
            console.log('addToAcomputed');
            return this.a + this.age;
        },
        addToBcomputed: function(){
            console.log('addToBcomputed');
            return this.b + this.age;
        }
    }
});

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>VueJS Computed properties - stackoverflow</title>
            <link href="style.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
        </head>
        <body>
            <div id="vue-app">
                <h1>Computed Properties</h1>
                <button v-on:click="a++">Add to A</button>
                <button v-on:click="b++">Add to B</button>
                <p>Age + A = {{ addToAcomputed }}</p>
                <p>Age + B = {{ addToBcomputed }}</p>
            </div>
        </body>
        
        <script src="app.js"></script>
    </html>

Le résultat expliqué

Lorsque je clique sur le bouton "Ajouter à A" , seule la propriété calculée addToAcomputedest appelée car, comme nous l'avons déjà dit, les propriétés calculées ne sont exécutées que lorsqu'une dépendance a changé. Et comme je n'ai pas appuyé sur le bouton "Ajouter à B" et que la valeur de la propriété age pour B n'a pas changé, il n'y a aucune raison d'appeler et d'exécuter la propriété calculée addToBcomputed. Donc, dans un certain sens, la propriété calculée maintient la valeur "même inchangée" pour la propriété B comme une sorte de cache. Et dans ce cas, cela est considéré comme une bonne pratique .

Du docs

Les propriétés ..calculées sont mises en cache en fonction de leurs dépendances. Une propriété calculée ne sera réévaluée que lorsque certaines de ses dépendances auront changé.

Si vous voulez que les données soient mises en cache, utilisez les propriétés calculées si vous ne voulez pas que les données soient mises en cache, utilisez des propriétés de méthode simples.

Une des différences entre calculé et méthode. Supposons que nous ayons une fonction qui retournera la valeur du compteur (le compteur est juste une variable). Regardons comment la fonction se comporte à la fois dans le calcul et dans la méthode

Calculé

Lors de la première exécution, le code à l'intérieur de la fonction sera exécuté et vuejs stockera la valeur du compteur dans le cache (pour un accès plus rapide). Mais lorsque nous appelons à nouveau la fonction vuejs n'exécutera plus le code écrit à l'intérieur de cette fonction. Il vérifie d'abord toute modification apportée au compteur ou non. Si des modifications sont apportées, alors seulement il réexécutera le code qui se trouve à l'intérieur de cette fonction. Si aucune modification n'est apportée au compteur, vuejs n'exécutera pas à nouveau la fonction. Il renverra simplement le résultat précédent du cache.

Méthode

C'est comme une méthode normale dans le javascript. Chaque fois que nous appelons la méthode, elle exécutera toujours le code à l'intérieur de la fonction, quelles que soient les modifications apportées au compteur.

La méthode réexécute toujours le code indépendamment des modifications apportées au code. où, tel que calculé, réexécutera le code alors seulement si l'une des valeurs de sa dépendance a changé. Sinon, il nous donnera le résultat précédent du cache sans réexécuter

Voici une ventilation de cette question.

Quand utiliser les méthodes

• Pour réagir à un événement se produisant dans le DOM
• Pour appeler une fonction lorsque quelque chose se produit dans votre composant.
• Vous pouvez appeler une méthode à partir de propriétés calculées ou d'observateurs.

Quand utiliser les propriétés calculées

• Vous devez composer de nouvelles données à partir de sources de données existantes
• Vous avez une variable que vous utilisez dans votre modèle qui est construite à partir d'une ou plusieurs propriétés de données
• Vous souhaitez réduire un nom de propriété imbriqué compliqué à un nom plus lisible et plus facile à utiliser (mais mettez-le à jour lorsque la propriété d'origine change)
• Vous devez référencer une valeur du modèle. Dans ce cas, la création d'une propriété calculée est la meilleure chose, car elle est mise en cache.
• Vous devez écouter les modifications de plusieurs propriétés de données

Propriétés calculées

Les propriétés calculées sont également appelées valeur calculée. Cela signifie qu'ils sont mis à jour et peuvent être modifiés à tout moment. En outre, il met en cache les données jusqu'à ce qu'elles changent. Lorsque Vue est instanciée, les propriétés calculées sont converties en propriété.

Une autre chose que je veux partager, vous ne pouvez passer aucun paramètre dans les propriétés calculées, c'est pourquoi tout en appelant une propriété d'ordinateur sans parenthèse.

Méthodes

Les méthodes sont identiques à la fonction et fonctionnent de la même manière. De plus, une méthode ne fait rien à moins que vous ne l'appeliez. De plus, comme toutes les fonctions javascript, il accepte les paramètres et sera réévalué à chaque fois qu'il sera appelé. Après cela, ils ne peuvent pas mettre en cache les valeurs

Dans la méthode appelant la parenthèse est là et vous pouvez y envoyer un ou plusieurs paramètres.

Je suis tombé sur la même question. Pour moi, c'est plus clair comme ceci:

1. Lorsque Vue.js voit le v-on directivesuivi d'une méthode, il sait exactement quelle méthode appeler et quand l' appeler.

<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button

<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */

2. Lorsqu'une méthode est appelée sans le,v-on directive elle sera appelée à chaque fois qu'un événement est déclenché sur la page qui met à jour le DOM (ou doit simplement restituer une partie de la page). Même lorsque cette méthode n'a rien à voir avec l'événement déclenché.

<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
   messageUppercase() {
      console.log("messageUpercase");
      return this.message.toUpperCase();
   }
}
/* The method `messageUppercase()` is called on every button click, mouse hover 
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/

3. Une propriété Computed n'est appelée que lorsqu'une valeur de propriété est modifiée qui est référencée par le thismot dans sa définition de fonction.
   

<p>Uppercase message: {{ messageUppercase }}</p> 
data() {
 return {
    message: "I love Vue.js"
   }
 },
computed: {
 messageUppercase() {
    console.log("messageUpercase");
    return this.message.toUpperCase();
 }
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific 
event changes the value of message.  */

Ce qu'il faut retenir ici, c'est qu'il est recommandé d'utiliser les computedpropriétés au cas où une méthode ne serait pas appelée avec le v-on directive.