O que seria o Data, Computed e Methods no VueJS

Salve, Gabriel.

Como vai?

Vamos lá.

Data

Aqui é onde definimos todas as nossas variáveis específicas do componente, que retornam um objeto.

Essas propriedades de dados são reativas. Ou seja, qualquer alteração nas variáveis declaradas dentro dos dados refletirá imediatamente em nossa visualização/página desse arquivo específico.

Resumidamente, é o nosso estado local. O estado muda, o componente se atualiza.

Methods

São funções que podem ser chamadas dentro do componente. Quando usado apropriadamente, os métodos normalmente estão vinculados a determinados eventos: click, submit, foco... e então, uma vez que o gatilho é acionado, eles são executados.

Computed

Propriedades computadas também são funções, mas são diferentes de métodos. Eles são executados apenas uma vez por carregamento de página e serão executados novamente apenas se alguma variável dependente for alterada.

— Quando não usar propriedades computadas

• Não use propriedades computadas para operações assíncronas
• Se sua propriedade computada não contém nenhuma dependência reativa (uma maneira elegante de dizer se algum dado depende dessa propriedade para refletir o resultado na tela), não há sentido em que isso seja calculado.