O que é Vue.js: um guia prático sobre esse framework

Para quem cria projetos de desenvolvimento, a utilização de bibliotecas e frameworks são essenciais para agilidade e escalabilidade.

Hoje, vamos 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:

Tendências de buscas no Google: Vue jobs, React jobs e Angular jobs.

Interesse pelo termo Vue jobs por região.

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 recebei nú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!

Veja a lista com mais hooks no site do Vue.

Sintaxe de template

Interpolações

Textos: o mais básico de todos é o texto, ele usa a syntax do “Mustache”:

Html: Usado para quando queremos interpretar como uma tag o conteúdo e não só como texto:

Atributos: Como não conseguimos usar o Mustaches para declarar os atributos html, usarmos o v-bind:

Lembrando que v-bind recebe uma variável que esta dentro do escopo do Vue.

Eventos: Quando queremos trabalhar com os eventos como click, change e etc, trabalhamos com o v-on:

Conseguimos usar também qualquer expressão Javascript dentro desses conteúdos, como, por exemplo:

Shorthands

Temos o prefixo v- quando especificamos algo do vue em tags, como v-bind ou v-on, nós temos alguns atalhos para isso

v-bind:id=”1″ pode ser facilmente diminuído para :id=”1″
v-on.click=”clicked” pode ser facilmente diminuído para @click=”clicked”

Loop

Tratar com loop em seu template no vue é bem simples, usamos o v-for na tag/componente que você queira que se repita, segue o exemplo:

Sempre que possível devemos passar o atributo key, ele serve para que quando o Vue for renderizar o conteúdo para que ele ache de forma mais fácil e performática o DOM que precisa atualizar.

Condicional

Conseguimos trabalhar facilmente com conficionais em componentes dinâmicos, segue um exemplo simples de if, else if e else:

Trabalhando com formulários no Vue

Conseguimos usar a diretiva v-model para criar two-way binding nos elementos de formulário como input, textarea, select e etc. Ele automaticamente busca a melhor forma de atualizar o valor da variável dependendo de como for o elemente, ex:

Conforme você escreve no input ele também atualiza o valor da variável na tela, o mesmo acontece com os demais elementos de um formulário.

Comunicação de componentes Filho para o Pai

Para passar dados de pai para filho já vimos nas instâncias que o props nos permite fazer isso agora como fazermos o ao contrário?

No Vue nós temos um carinha chamado $emit, que você vai emitir um evento para o componente pai, passando ou não uma variável, e o componente pai para receber esse evento ele declara o nome do evento filho, passando realmente um evento para o que o filho declarou segue o exemplo:

Componente PAI:

E no filho:

Posso alterar o valor de uma prop do pai no filho noVue.js?

Primeiro que eu recomendo fortemente que você não faça isso, como deixei claro quando expliquei o que era ela, mas no mundo real nós sabemos que precisamos às vezes disso, então vou ensinar alguns truques para vocês. Primeiro na doc do Vue eles mostram como fazer a alteração do filho para o pai que seria assim:

Aqui você declara a prop title e um evento para atualizar ela:

E assim você emitiria caso desejasse atualizar o valor:

Assim você não quebraria nenhum patterns do Vue e conseguiria alcançar seu objetivo, no entanto o Vue viu isso como uma necessidade da comunidade e criou o que chamamos de .sync que ele lhe permite alterar a propriedade do filho pro pai e vice-versa.

Aqui você tem o mesmo mostrado acima, mas utilizando apenas o .sync:

Considerações finais

Espero que tenha gostado desse guia sobre o Vue.js, um framework com uma grande variedade de recursos. Separei para você alguns links que podem ser interessantes para você estudar mais esse framework.

E aproveite para conferir mais conteúdos no Blog da LinkApi, como este texto sobre o InterceptorNestJS.