Props, Data, Computed e Method. Quando usar??? | Vue.js parte 1: construindo Single Page Applications

Olá, Jhonatas! Tudo certo?

Acredito que seja confuso pois todas essas propriedades trabalham com dados do componente. As diferenças são em questão de finalidade.

As props serão recebidas pelo seu componente quando utilizado em outro componente. O nome vem de "propriedades". O objetivo é receber um dado externo, que pode tanto definir um configuração visual (por exemplo, passar a cor do componente dinamicamente) ou passar dados de estado (como em um componente de Perfil que passa para um componente-filho Avatar a imagem do usuário). Quando definimos as props dentro do export default {} estamos dizendo ao Vue quais propriedades vamos esperar e precisamos para trabalhar, além de podermos configurar seus tipos. Você pode ler mais na documentação do Vue.

// definição de props no componente-filho
props: {
    title: String,
}

// passando o valor para props
<componente-filho title="Meu projeto Vue"></componente-filho>

Data é todo dado do seu componente que é interno. Não veio via props, e seu próprio componente define. Precisamos disso para criar uma referência ao dado. Como estamos trabalhando dentro de funções, na maioria das vezes, nossos dados ficam limitados ao escopo da função em que foi criado. E como fazer para compartilhar esse dado pelo componente? Como chamá-lo no template? Com o data definimos seu nome, e seu valor inicial. Assim, estamos criando uma variável que é acessível por todo o componente. Se você já viu Orientação Orientada a Objetos, é como criar as propriedades de uma classe.

Os methods são os dados mais diferentes dos quatro. Isso porque são funções. Nesse campo você pode definir os métodos que seu componente deve ter, ou seja, seus comportamentos. Ações como salvar dados, criar usuários, etc, seriam definidas aqui.

Acredito que entre todas, computed seja a parte mais complexa. A principal diferença entre data e props está na sua origem, props são externas, data é interno. Methods são funções que criam comportamentos do componente. Mas computed não é algo tão simples.

Vamos supor que você possui uma mensagem "Olá, mundo!" definida em data, e você quer apresentar essa mensagem ao contrário ("odnum, álO"). Você pode fazer isso da seguinte forma: this.message.split('').reverse().join('').

Beleza, mas a princípio você faria isso em uma função, e você pode achar que é só criar uma função mensagemReversa() em methods. Na realidade, isso é possível e irá funcionar, mas não é boa prática. Isso é uma propriedade computada, não é uma propriedade por si só, ela depende de outra propriedade, que ela apenas trata e retorna esse valor tratado. Então você pode criar uma computed que nada mais será do que uma função que retorna a mensagem invertida:

computed: {
    // a computed getter
    mensagemReversa: function () {
      return this.mensagem.split('').reverse().join('')
    }
  }

Se você apenas criasse um método, em methods, não seria ideal, porque o computed é feito para atualizar reativamente. Sempre que sua dependência (como mensagem) for atualizada, o computed atualiza roda novamente, atualizando seu retorno.

O Vue monta um componente com as propriedades como data, props, method e computed para te ajudar. Ele garante que você usando-as da maneira correta ganhará performance (computed por exemplo ajuda muito na performance). Claro que você pode não seguir as convenções, e talvez essa seja a origem da maior parte da confusão, mas há motivos para segui-lás. O Vue trata todos esses dados, e você colocando-os no lugar correto, tende a ganhar, pois o Vue entenderá quais serão seus objetivos.

Espero ter ajudado!

Chegou a hora de transformar