Méthodes et calcul dans Vue

Question

Quelle est la principale différence entre un methods et un computed dans Vue.js ?

Ils se ressemblent et sont interchangeables.

Answer 1

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

Propriété calculée

Un nom plus approprié pour une valeur calculée est un propriété calculée . En fait, lorsque Vue est instancié, 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 lorsque l'une des valeurs sous-jacentes utilisées pour la calculer est mise à jour. Vous ne devez pas appelez un calculateur et il n'accepte aucun paramètre. Vous faites référence à 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 utiles pour manipuler les données qui existent dans votre Vue. Lorsque vous souhaitez filtrer ou transformer vos données, vous utiliserez 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 afin d'é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é (comme cela pourrait être le cas dans une boucle par exemple).

Méthode

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

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(whichChar))
    }
}

Vue documentation est vraiment bon et facilement accessible. Je le recommande.

Answer 2

Comme @gleenk a demandé un exemple pratique pour rendre évidentes 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 & addToBmethod et les propriétés calculées addToAcomputed & addToBcomputed ajoutent tous +20 (c'est-à-dire que les age ) pour soit a o b . En ce qui concerne les méthodes, elles sont les deux appelé chaque le moment où une action a été effectuée sur tout des propriétés listé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 n'est exécuté que lorsqu'une dépendance a changé ; par exemple, l'une des valeurs de la propriété spécifique qui fait référence à A ou B déclenchera addToAcomputed o addToBcomputed respectivement.

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

Démonstration 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é

Lorsque je clique sur le bouton "Ajouter à A" toutes les méthodes sont appelées (voir le résultat de l'écran de journal de la console ci-dessus), la fonction addToBmethod() est également exécuté mais je n'ai pas appuyé sur la touche "Ajouter à B" la valeur de la 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, là encore, les deux méthodes seront appelées indépendamment des changements de dépendance. Selon ce scénario, c'est mauvaise pratique car nous exécutons les méthodes à chaque fois, même si les dépendances n'ont pas changé. Cela consomme beaucoup de ressources car il n'y a pas de cache pour les valeurs des propriétés qui n'ont pas changé.

La démo du cas de la 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 addToAcomputed est appelé 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é d'âge pour B n'a pas changé, il n'y a aucune raison d'appeler et d'exécuter la propriété calculée addToBcomputed . Ainsi, dans un certain sens, la propriété calculée maintient la valeur "inchangée" de la propriété B comme une sorte de cache. Et dans cette circonstance, cela est considéré bonne pratique .

Answer 3

De la 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 si certaines de ses dépendances ont changé.

Si vous voulez que les données soient mises en cache, utilisez les propriétés Computed ; en revanche, si vous ne voulez pas que les données soient mises en cache, utilisez les propriétés Method.

Answer 4

Une des différences entre le calcul et la méthode. Supposons que nous ayons une fonction qui renvoie la valeur du compteur (le compteur est juste une variable). Voyons comment la fonction se comporte dans les deux cas. calculé y méthode

Calculé

Lors de la première exécution, le code contenu dans 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écute pas à nouveau le code écrit dans cette fonction. Il vérifie d'abord si le compteur a été modifié ou non. S'il y a des changements, alors seulement il ré-exécutera le code qui est à l'intérieur de cette fonction. Si aucune modification n'est apportée au compteur, Vuejs ne réexécutera pas 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, indépendamment des modifications apportées au compteur.

La méthode réexécutera toujours le code sans tenir compte des changements dans le code, alors que le calcul ne réexécutera le code que si les valeurs d'une de ses dépendances ont changé. Sinon, il nous donnera le résultat précédent du cache sans ré-exécution.

Answer 5

Propriétés calculées

Les propriétés calculées sont également appelées valeurs calculées. Cela signifie qu'elles sont mises à jour et peuvent être modifiées à tout moment. En outre, elles mettent en cache les données jusqu'à ce qu'elles soient modifiées. Lorsque Vue est instancié, les propriétés calculées sont converties en propriétés.

Une dernière chose que je veux partager, vous ne pouvez pas passer de paramètre dans les propriétés calculées, c'est pourquoi en appelant une propriété informatique, aucune parenthèse n'est requise.

Méthodes

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

Dans la méthode d'appel, il y a une parenthèse et vous pouvez y envoyer un ou plusieurs paramètres.