Antes de tentar dizer pra você porque eu acredito que você deveria conhecer o Vue, eu gostaria de explicar o porque eu precisei começar a desenvolver neste framework. A resposta é bem direta: porque nosso cliente precisava de um projeto em Vue JS. Calma, eu vou te contextualizar melhor!

Antes de tentar dizer pra você porque eu acredito que você deveria conhecer o Vue, eu gostaria de explicar o porque eu precisei começar a desenvolver neste framework. A resposta é bem direta: porque nosso cliente precisava de um projeto em Vue JS. Calma, eu vou te contextualizar melhor!
O nosso <a href="https://www.cms.dtidigital.com.br/blog/times-de-produto-e-metodologias-ageis/">time </a>estava no início de um projeto, todos os produtos de frontend do nosso cliente já haviam sido construídos utilizando o Vue. Logo, foi necessário nos esforçarmos para aprender sobre o framework.
Portanto, relato aqui o ponto de vista de alguém que partiu de não conhecer o Vue para entregar um sistema de sucesso com ele!
<div id="toc_container" class="toc_white no_bullets">Sum&aacute;rio<ul class="toc_list"><li><a href="#Curva-de-aprendizado-com-Vue-JS">1 Curva de aprendizado com Vue JS</a></li><li><a href="#O-crescente-desenvolvimento-do-Vue-JS">2 O crescente desenvolvimento do Vue JS</a></li><li><a href="#Agora-sobre-o-codigo-em-Vue-JS">3 Agora, sobre o código em Vue JS</a><ul><li><a href="#Elementos-e-variaveis-data-e-methods">3.1 Elementos e variáveis: data e methods</a></li></ul></li><li><a href="#Validacoes-v-if-e-v-show">4 Validações: v-if e v-show</a></li><li><a href="#Repeticoes-V-FOR">5 Repetições: V-FOR</a></li><li><a href="#Ligando-javascript-e-HTML-Data-Binding">6 Ligando javascript e HTML: Data Binding</a></li><li><a href="#Outros-topicos-interessantes">7 Outros tópicos interessantes</a></li><li><a href="#Por-que-eu-deveria-conhecer-o-Vue-JS">8 Por que eu deveria conhecer o Vue JS?</a></li></ul></div>
<h2>Curva de aprendizado com Vue JS</h2>
No começo do projeto, tínhamos somente uma pessoa desenvolvedora no nosso time com experiência avançada em desenvolvimento web, mas em pouco tempo todo o time já era capaz de atuar nos portais que construímos e lidar habilmente com as tarefas do nosso backlog.
É claro que erramos bastante no processo de aprendizado (peço perdão a todos os itens que deixamos desalinhados depois de apanhar muito para o CSS), mas com o tempo conseguimos melhorar nosso aprendizado da ferramenta. E, nesse processo todo, um documento que me ajudou muito, foi a documentação atualizada e traduzida para o português do Vue que está disponível no <a href="https://br.vuejs.org/v2/guide/index.html">site oficial</a>.
<h2>O crescente desenvolvimento do Vue JS</h2>
Nos últimos anos, o Vue tem disputado espaço com os outros grandes frameworks na comunidade, como os bem consolidados Angular e React. E eu não falo isso só porque o Vue é meu &#8220;xodozinho&#8221;, a <a href="https://insights.stackoverflow.com/survey/2020">pesquisa de insights do stackoverflow</a> de 2020 ilustra bem o que eu quero dizer.
<figure id="attachment_17136" aria-describedby="caption-attachment-17136" style="width: 457px" class="wp-caption alignnone"><img fetchpriority="high" decoding="async" class="wp-image-17136" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Pesquisa-Vue-JS-300x185.png" alt="pesquisa de insights do stackoverflow de 2020" width="457" height="282" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Pesquisa-Vue-JS-300x185.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Pesquisa-Vue-JS-350x216.png 350w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Pesquisa-Vue-JS.png 502w" sizes="(max-width: 457px) 100vw, 457px" /><figcaption id="caption-attachment-17136" class="wp-caption-text">pesquisa de insights do stackoverflow de 2020</figcaption></figure>
&nbsp;
Esse gráfico é resultado de uma pesquisa feita para pessoas desenvolvedoras perguntando se elas gostariam de continuar trabalhando com a tecnologia a qual elas estavam desenvolvendo na época. Nesse caso, Vue disputa no topo, bem perto de React e Asp Net Core. Em seguida, os pesquisadores perguntaram aos entrevistados com quais tecnologias não tiveram nenhum contato até o momento mas apresentavam interesse em começar a desenvolver. E esse foi o resultado:
&nbsp;
<figure id="attachment_17137" aria-describedby="caption-attachment-17137" style="width: 415px" class="wp-caption alignnone"><img decoding="async" class="wp-image-17137" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/VUE-300x195.png" alt="Pesquisa stackoverflow" width="415" height="270" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/VUE-300x195.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/VUE-350x227.png 350w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/VUE.png 517w" sizes="(max-width: 415px) 100vw, 415px" /><figcaption id="caption-attachment-17137" class="wp-caption-text">Esse gráfico mostra uma dominância expressiva do React, mas com Vue e Angular acompanhando em seguida.</figcaption></figure>
&nbsp;
<h2>Agora, sobre o código em Vue JS</h2>
<h3>Elementos e variáveis: data e methods</h3>
Começando por como declaramos variáveis que utilizaremos no componente ou na tela e como declarar os métodos que esse componente vai utilizar. Os principais responsáveis por gerenciar esses elementos são as funções data e methods. Elas disponibilizam para o DOM respectivamente quais variáveis e métodos ele poderá acessar. Vejamos no exemplo abaixo, vindo de muito tempo atrás em uma galáxia muito distante, como são utilizadas a variável nomePessoa e o método exibeFuncao.
<figure id="attachment_17138" aria-describedby="caption-attachment-17138" style="width: 487px" class="wp-caption alignnone"><img decoding="async" class="wp-image-17138" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/elementos-vue-js-300x226.png" alt="Vue js " width="487" height="367" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/elementos-vue-js-300x226.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/elementos-vue-js-350x264.png 350w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/elementos-vue-js.png 499w" sizes="(max-width: 487px) 100vw, 487px" /><figcaption id="caption-attachment-17138" class="wp-caption-text">Imagem de programação Vue</figcaption></figure>
<h2>Validações: v-if e v-show</h2>
Além do valor das variáveis exibidos para a pessoa usuária na tela, podemos falar sobre como o Vue manipula o conteúdo de forma interativa. As validações nativas da linguagem v-if e v-show podem ser usadas em um componente para determinar se ele deverá ou não ser exibido. No caso do v-if, o elemento somente é gerado no DOM se (ou quando) sua condição for verdadeira. Enquanto um componente marcado pelo v-show será gerado no DOM mas será exibido ou não a depender do resultado da condição. Para decidir qual usar, é importante pensar no tamanho do seu componente e se há necessidade de gerá-lo todo mas não exibi-lo (com o v-show). Também você deve avaliar se há um cenário em que a exibição dele se altere e sua re-geração seja necessária (usando o v-if).
<img loading="lazy" decoding="async" class="alignnone wp-image-17139" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Validacoes-vif-e-vshow-300x219.png" alt="" width="470" height="343" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Validacoes-vif-e-vshow-300x219.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Validacoes-vif-e-vshow-350x256.png 350w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Validacoes-vif-e-vshow.png 504w" sizes="(max-width: 470px) 100vw, 470px" />
<h2>Repetições: V-FOR</h2>
Quando estamos exibindo na tela uma lista de itens relacionados, como a lista de compras no carrinho, por exemplo, vamos repetir na tela um mesmo componente. Para isso, podemos usar o v-for para renderizar uma lista de elementos com base em uma lista (ou iterando sobre um objeto, mas com array é mais comum). O campo key utilizado no código abaixo é usado junto ao v-for para que sua aplicação possa diferenciar cada um dos elementos da lista, conseguindo aplicar nos componentes em tela alterações realizadas no vetor no javascript.
&nbsp;
<img loading="lazy" decoding="async" class="alignnone wp-image-17140" src="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Repeticoes-V-FOR-300x187.png" alt="Vue js " width="488" height="304" srcset="https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Repeticoes-V-FOR-300x187.png 300w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Repeticoes-V-FOR-350x218.png 350w, https://www.cms.dtidigital.com.br/wp-content/uploads/2021/07/Repeticoes-V-FOR.png 555w" sizes="(max-width: 488px) 100vw, 488px" />
<h2>Ligando javascript e HTML: Data Binding</h2>
Citei anteriormente algumas condicionais usadas para renderizar um componente. Mas até agora eu estava mostrando que elas respondiam ao valor de uma variável sem falar bem como isso funciona. Isso quer dizer que eu gero o componente uma vez e acabou? Não, é agora que vem o Data Binding. No Vue, o Data Binding funciona para alterações numa “via de mão dupla”. O Two-Way Data Binding quer dizer, basicamente, que qualquer alteração que realizada no Javascript vai ser percebida pelo DOM e qualquer alteração no DOM vai ser percebida no Javascript. Então é dessa forma que os componentes “escondidos” com v-if ou v-show podem alternar entre sendo exibidos respondendo à sua variável ou novos elementos aparecem com o v-for.
<h2>Outros tópicos interessantes</h2>
Poderíamos falar aqui sobre vários tópicos interessantes que o Vue tem para oferecer. Mas como a proposta desse texto não é mergulhar nas profundezas técnicas do Vue, vamos pular para conclusões. Caso você queira ler mais sobre o assunto, eu recomendo uma leitura da <a href="https://br.vuejs.org/v2/guide/index.html">documentação oficial do Vue</a> e descubra um pouco mais sobre o seu <a href="https://vuetifyjs.com/en/introduction/why-vuetify/">principal framework de componentes, o Vuetify.</a>
<h2>Por que eu deveria conhecer o Vue JS?</h2>
Depois de apresentar um pouco sobre o que é o Vue em si, volto à nossa principal pergunta: “Por que eu deveria conhecer o Vue?”.
No meu caso, conhecer o framework foi praticamente uma obrigação. Mas eventualmente eu e você vamos começar um novo projeto e precisamos nos perguntar qual framework usar.
Muita gente na comunidade está optando pelo Vue, mesmo que ainda não existam grandes plataformas apadrinhadas por grandes empresas construídas nele. Um dos pontos que mais gostei na minha experiência foi a curva de aprendizado. A considero muito positiva para aqueles que estão tendo seu primeiro contato com o frontend.
Além de saber como construir uma solução a partir do Vue, conhecer novos frameworks por si só te dá um poder importante. Não só porque você é um profissional com várias tecnologias no currículo, mas porque as similaridades e diferenças entre frameworks estão dizendo alguma coisa. Sendo capaz de compará-las, você é capaz de decidir quando usar cada um com base no tamanho do produto final, número de usuários simultâneos, conhecimento prévio do seu time, ou até mesmo entender o motivo das semelhanças entre eles.
Se o Vue surgiu anos depois do lançamento do React e ainda carrega a mesma ideia de gerenciamento de estado da aplicação, temos um forte indício de que essa é uma abordagem que funciona muito bem na prática: Quanto mais frameworks você conhece, menos você depende deles.

Vue JS: Por que você deve conhecer esse framework?

Desbloqueie o futuro do seu negócio

Confira outros artigos