• Desenvolvimento Web
  • 4 minutos de leitura
  • 178 visualizações avalie

O que é Vue.js:

Para quem cria projetos de desenvolvimento, a utilização de bibliotecas e frameworks são essenciais para agilidade e escalabilidade. Hoje vou falar sabre o Vue.js, um framework progressivo JavaScript, seus diferenciais e como ele pode ser utilizado em seus projetos de desenvolvimento.

O que é Vue.js?
O Vue.js é uma estrutura progressiva para Javascript usada para construir interfaces da web e aplicativos SPA. Não apenas para interfaces da web, Vue.js também é usado para desktop e desenvolvimento de aplicativos móveis com estrutura Electron. A extensão HTML e a base JS rapidamente tornaram o Vue uma ferramenta de front-end favorita, evidenciada pela adoção por gigantes como Adobe, Behance, Alibaba, Gitlab e Xiaomi.

Por que usar o Vue.js?
Reatividade;
Reutilização de components;
Legibilidade do código;
Ecossistema de ferramentas sólidas;
Fácil de aprender;
Documentação excelente;
Suporte da comunidade muito unidos e fortes;
Grande flexibilidade;
Two way data-binding (bem próxima ao do Angular).

O diferencial do Vue.js para outros frameworks como react e Angular
Temos muitos frameworks que podemos listar aqui, mas acredito que os frameworks que batem de frente com o mesmo intuito que o Vue, é o React e o Angular. Não tenho muito conhecimento em React e Angular, mas o pouco que vi desses frameworks, o Vue consegue trazer, de uma forma melhor, a organização dos componentes, como eles são estruturados, estilizados e reativos. 

Não irei muito a fundo nesse tema, mas deixarei a referência da página do Vue, onde eles comparam os principais pontos diferenciais com outros frameworks.

Como está o crescimento do Vue e ofertas de empregos?
O Vue.js teve um crescimento muito grande nos últimos anos. Segue um gráfico de comparativos de start no github:

Em questões de ofertas de empregos, acredito que o Vue não tenha tanto poder aqui no Brasil, talvez pelo fato de o Vue ser gerenciado pela comunidade diferente do React, que é mantido pelo Facebook? Será? Enfim deixo essa dúvida que eu também tenho.

Deixarei um link de gráficos do Google Trends em que mostra os termos mais procurados e os locais que foram procurados com mais constância. Claramente você vê que o Vue não é tão forte no Brasil. Segue alguns gráficos sobre o assunto:

Ainda assim, vejo um grande potencial nesse framework para os próximos anos. Vejo muitas vagas de Vue.Js no LinkedIn, mas a maioria está no exterior. Temos alguns sites criados pela comunidade para você conferir sobre esse tema.

O básico do Vue.js
Antes de começarmos essa parte, gostaria que vocês fixassem uma breve frase:

Tudo em Vue.js é componente, não existem páginas e componentes, apenas componentes e componentes.
A instância do Vue.js
O Vue recebe inúmeros atributos, então não vamos entrar em detalhes com todos, mas apresentarei todos que são mais utilizados.

Name
Esse com toda certeza é o mais simples da nossa lista, aqui colocamos o nome do nosso componente, lembre-se que tudo em Vue é Componente.

Components
Quando o seu componente tem outros componentes filhos, você precisa declarar eles aqui antes de usar dentro da tag de seu template. Normalmente você o importa declarando uma variável e passando a variável para dentro deste objeto. Isso só não acontece caso o componente que esta querendo usar seja global, muito comum nos frameworks UI.

Data
Onde você inicia todas as variáveis reativas do seu componente.

Obs: Você retorna um objeto e somente as variáveis que estiverem dentro desse objeto serão reativas.
Methods
É aqui que ficam nossas funções utilizadas para tratar dados, conexões APIs etc.

Computed
São funções com lógicas que vão de simples a complexas, você consegue fazer o mesmo com o methods. O diferencial da computed é que você armazena esses valores no cache e só é recalculado novamente caso alguma variável utilizada nela sofrer alterações.

Você jamais pode passar parâmetros para a computed e não, não use a gambiarra de retornar uma função recebendo parâmetros, pois se você esta usando a computed assim é porque você não precisa de uma computed aqui e sim um método.

Watch
Conseguimos assistir uma variável e toda vez que essa variável sofrer alteração ela irá invocar a função atribuída a ela.

Props
Quando você precisa passar dados do pai para filho no vue nós utilizamos as props, lembrando que é um anti-pattern alterar o valor da variável passada pela prop no filho.

Lifecycle Hooks
Listarei aqui apenas os mais utilizados e deixarei o link com todo o lifecycle do Vue para mais hooks.

beforeCreate: neste hook você só tem os Eventos javascript disponível;
created: aqui você ja tem todas injeções de dependências e as reatividades presentes no vue;
beforeMount: aqui você ja tem o seu HTML renderizado;
mounted: quando os seus componentes estão montados, ele não garante que todos os componentes filhos estejam montados!

Feedback

Me diga aqui abaixo nos comentários o que você achou desse post

Compartilhe com

Este website utiliza cookies próprios e de terceiros para garantir um melhor serviço e experiência de utilização. São utilizados para personalizar conteúdos e anúncios, providenciar funcionalidades das redes sociais e analisar tráfego. A informação sobre a sua utilização no nosso website também é partilhada com parceiros de redes sociais, publicidade e análise.