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 .
