bom dia, não consegui entender muito bem a diferença entre esses dois, poderia me dar exemplos básicos por favor
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
bom dia, não consegui entender muito bem a diferença entre esses dois, poderia me dar exemplos básicos por favor
Olá Leveditor, tudo bem com você?
A principal diferença entre computed e methods tem haver com o cachê, ou seja, se você utiliza a função dentro de methods ela necessitará ser executada sempre para ter o retorno.
Enquanto utilizando computed existe um cachê que irá reexecutar a função apenas caso alguma dependência (ex: variável) for alterada, caso contrário ele não irá processar novamente, pois já tem o resultado da função no cachê, entendeu?
Vou dar um exemplo: Imagine que precisamos inverter uma String
<div id="exemplo">
<p> Mensagem Original: " {{mensagem}}" </p>
<p> Mensagem Ao Contrário: "{{ mensagemInvertida}}" </p>
</div>E teremos em computed:
computed: {
mensagemInvertida: function() {
return this.mensagem.split('').reverse().join()
}
}Veja que quando utilizamos computed em nosso template iremos chamar como se fosse uma propriedade e não uma função.
Podemos ter o mesmo resultado utilizando methods da seguinte maneira
<p> Mensagem ao contrário: "{{ mensagemInvertida()}}" </p>
methods: {
mensagemInvertida: function() {
return this.mensagem.split('').reverse().join()
}
}Veja que dessa forma precisamos em nosso template executar a função e sempre que nosso site renderizar teremos que rodar novamente, enquanto utilizando o computed a função só iria reexecutar caso a String tivesse mudanças.
Dessa forma podemos ver que uma boa utilização para computed é quando temos que fazer uma conta complexa ou pesada, pois caso o site tenha que renderizar novamente já terá guardado o resultado, tornando mais rápido e eficiente o processamento ;)
Ficou claro? Vou deixar um link da documentação do Vue que te da bons exemplos para você poder ler um pouco mais sobre esse assunto: Methods x Computed
Abraços e Bons Estudos!