Num componente Vue temos de ter as coisas organizadas, para isso existem alguns conceitos/parametros a ter em conta e que são a maneira de funcionar de um componente.
methods
Aqui deves guardar funções. Todo o tipo de funções que tratam dados e funcionalidade do componente.
Guardando essas funções no methods permite que eles sejam usados noutros componentes, por herança ou por grau de parentesco.
Aqui podes também importar métodos da store.
data
Aqui deves guardas primitivos. Strings, arrays, objectos, etc. No fundo o estado do componente.
computed
Aqui tens uma mistura dos dois anteriores, e entra a lógica/metodologia de programação reactiva. Estes métodos são funções que retornam dados são provaveis de terem sido alterados entre renderizações. Imagina um exemplo:
Tens uma imagem no componente e queres pegar no canto para a fazer maior. Algures na lógica vais ter de dizer qual o
width, height dessa imagem. Depois queres arrastar (fazer drag) dela e vais ter de controlar o left e top dessa imagem.
Ora em vêz de ter um 4 valores espalhados no
data, e depois no template uma misturada com esses valores tipo: ![]()
que fica meio dificil de manter; o mellhor é ter um computed para isso:computed:
styles(){
return {left: this.left, top: this.top, height: this.height, width: this.width};
}
}
e no template fica bem mais limpo com somente
![]()
.
Outra funcionalidade muito util é podermos importar da store os getters que vão para
computed e os métodos da store que vão para os methods do componente.props
Os dados passados ao componente. Esta é uma das poucas vias de passagem de dados, e permite controlos rígidos de tipagem. O que está no
data é interno ao componente e possivelmente aos seus descendentes. O que está no props são dados para usar no componente e não podem ser mudados diretamente, só via mudança no estado do componente ou parte da aplicação que gera esses dados.watch
Aqui deves guardar métodos que devem ser chamados quando o valor de uma propriedade de
data ou props mudar. Pode haver casos em que funcione usar computed, outras watch. Em regra geral, se houver algo que precises saber quando mudou usa watch; quando quiseres ter sempre dados atualizados, usa computed.