web-dev-qa-db-fra.com

Méthode vs Calculé 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.

javascriptmethodsvue.jsvuejs2computed-properties
124
Bootstrap4

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 un propriété calculée . En fait, lorsque le Vue est instancié, les propriétés calculées sont converties en une propriété du Vue avec un getter et parfois un setter. En gros, 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 un calcul et il n’accepte aucun paramètre. Vous faites référence à une propriété calculée, tout comme 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('')
  }
}

Ce 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 existantes sur votre Vue. Chaque fois que 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 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 été modifiée (car elle pourrait 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 où 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))
    }
}

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

170
Bert

Comme @gleenk a demandé un exemple concret 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 vous 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 (la valeur age) à a ou b. En ce qui concerne les méthodes, elles sont toutes les deux appelées toutes les fois qu'une action a été effectuée sur any 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 est exécuté uniquement lorsqu'une dépendance a été modifiée. Par exemple, l'une des valeurs de propriété spécifiques faisant référence à A ou B déclenchera respectivement addToAcomputed ou addToBcomputed.

La méthode et les descriptions calculées semblent assez similaires, mais comme @Abdullah Khan l’a déjà spécifié , , elles ne sont pas la même chose ! Essayons maintenant d’ajouter du code HTML pour tout exécuter ensemble et voir où se situe la différence.

La démo de l'affaire Method

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 du journal de la console ci-dessus), la fonction addToBmethod() est également exécutée. mais je n'ai pas appuyé sur le bouton "Ajouter à B" ; la valeur de la propriété faisant 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 modifications 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 beaucoup de ressources car il n’existe pas de cache pour les valeurs de propriété qui n’ont pas changé.

methodbutton method

La démo de calcul de la propriété

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ée car, comme nous l'avons déjà dit, la valeur calculée les propriétés ne sont exécutées que lorsqu'une dépendance a été modifiée. 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’ya aucune raison d’appeler et exécuter la propriété calculée addToBcomputed. Ainsi, dans un certain sens, la propriété calculée conserve la valeur "identique à celle inchangée" pour la propriété B, comme une sorte de cache. Et dans ce cas, il s’agit de bonne pratique .

computedbutton computed

41
Giulio Bambini

De la docs

Les propriétés ..computed 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 été modifiées.

Si vous souhaitez que les données soient mises en cache, utilisez les propriétés calculées, par contre, si vous ne souhaitez pas que les données soient mises en cache, utilisez les propriétés Method simples.

10
Abdullah Khan

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

Calculé

Lors de la première exécution, le code 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 appellerons à nouveau la fonction, vuejs n'exécutera plus le code écrit à l'intérieur de cette fonction. Il vérifie d’abord ou non les modifications apportées au compteur. Si des modifications sont apportées, alors uniquement, il ré-exécutera le code contenu dans cette fonction. Si aucune modification n'est apportée au compteur, vuejs n'exécutera plus la fonction. Il retournera 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 dans la fonction, quelles que soient les modifications apportées au compteur.

La méthode réexécutera toujours le code, quelles que soient les modifications apportées. Dans les cas calculés, le code ne sera réexécuté que si l'une des valeurs de sa dépendance est modifiée. Sinon, le résultat précédent du cache sera renvoyé sans réexécution

6
PALLAMOLLA SAI

Propriétés calculées

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

Une dernière chose que je veux partager, vous ne pouvez passer aucun paramètre dans les propriétés calculées, c’est pourquoi lors de l’appel d’une propriété de l’ordinateur, aucune parenthèse n’est requise.

Méthodes

Les méthodes sont les mêmes que fonction et fonctionnent de la même manière. En outre, 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 appel. Après cela, ils ne peuvent plus mettre en cache les valeurs

Dans la méthode, appeler la parenthèse est là et vous pouvez envoyer un ou plusieurs paramètres dans cela.

2
Rajat

Voici un aperçu de cette question.

Quand utiliser des méthodes

  • Réagir à un événement dans le DOM
  • Appeler une fonction lorsque quelque chose se passe dans votre composant.
  • Vous pouvez appeler une méthode à partir des propriétés calculées ou des observateurs.

Quand utiliser les propriétés calculées

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