Quelle est la principale différence entre une méthode et une valeur calculée dans Vue.js?
Ils se ressemblent et sont interchangeables.
Quelle est la principale différence entre une méthode et une valeur calculée dans Vue.js?
Ils se ressemblent et sont interchangeables.
Réponses:
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:
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 toutes +20 (c'est-à-dire la age
valeur) à soit a
ou 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 addToAcomputed
ou 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.
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>
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é.
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>
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, 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
Quand utiliser les propriétés calculé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:
v-on directive
suivi 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 */
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.*/
this
mot 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 computed
propriétés au cas où une méthode ne serait pas appelée avec le v-on directive
.