Como o @gleenk pediu um exemplo prático para evidenciar as diferenças de cache e dependência entre métodos e propriedades computadas, mostrarei um cenário simples:
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;
}
}
});
Aqui temos 2 métodos e 2 propriedades calculadas que executam a mesma tarefa. Os métodos addToAmethode addToBmethode as propriedades computadas addToAcomputede addToBcomputedtudo add +20 (ou seja, o agevalor), quer aou b. Em relação aos métodos, ambos são chamados toda vez que uma ação é executada em qualquer uma das propriedades listadas, mesmo que as dependências de um método específico não tenham sido alteradas. Para as propriedades calculadas, o código é executado apenas quando uma dependência foi alterada; por exemplo, um dos valores específicos da propriedade que se refere a A ou B será acionado addToAcomputedou addToBcomputed, respectivamente.
O método e as descrições computadas parecem bastante semelhantes, mas como o @Abdullah Khan já o especificou , eles não são a mesma coisa ! Agora vamos tentar adicionar um pouco de html para executar tudo junto e ver onde está a diferença.
A demonstração de caso do 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>
O resultado explicado
Quando clico no botão "Adicionar a A" , todos os métodos são chamados (veja o resultado da tela de log do console acima), o addToBmethod()também é executado, mas não pressionei o botão "Adicionar a B" ; o valor da propriedade que se refere a B não foi alterado. O mesmo comportamento ocorre se decidirmos clicar no botão "Adicionar a B" , porque novamente os dois métodos serão chamados independentemente das alterações de dependência. De acordo com esse cenário, é uma prática ruim porque estamos executando os métodos sempre, mesmo quando as dependências não foram alteradas. Isso realmente consome recursos, porque não há um cache para os valores das propriedades que não foram alterados.
A demonstração do caso da propriedade Computed
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>
O resultado explicado
Quando clico no botão "Adicionar a A" , apenas a propriedade computada addToAcomputedé chamada porque, como já dissemos, as propriedades computadas são executadas somente quando uma dependência foi alterada. E como eu não pressionei o botão "Add to B" e o valor da propriedade age para B não mudou, não há razão para chamar e executar a propriedade computada addToBcomputed. Portanto, em certo sentido, a propriedade computada mantém o valor "igual inalterado" para a propriedade B como uma espécie de cache. E, nessa circunstância, isso é considerado uma boa prática .
