Com o contínuo aumento das frameworks front-end JavaScript, incluindo o novo Vue.js 3, tornou-se vital acompanhá-las e compreender tudo sobre suas novas características.
Neste artigo, vamos explorar o Vue.js 3 e seus novos recursos adicionadas. Estas últimas adições tornam o Vue.js ainda mais robusto, tornando-o uma ótima framework a ser considerada para seu próximo projeto. Você aprenderá em detalhes 10 coisas que deve saber sobre o Vue.js e como ele o ajudará a fornecer aplicativos front-end escaláveis e de alto desempenho.
Pronto? Vamos lá!
O que é Vue.js?
De acordo com Evan You, o criador do Vue.js:
“O Vue.js é uma solução mais flexível, menos opinante. É apenas uma camada de interface para que você possa usá-lo como um recurso leve nas páginas ao invés de um SPA completo”.
Ele queria criar uma framework front-end tão poderosa quanto a Angular, mas também “mais leve” e mais flexível, sem todos os plugins e conceitos desnecessários que vêm com a Angular.
O resultado foi o Vue.js, que é uma das mais populares frameworks front-end em uso hoje em dia.
Por que os desenvolvedores usam o Vue.js
Diferentes razões impulsionam um desenvolvedor a utilizar uma tecnologia específica. Vamos discutir por que achamos que você deve aprender o Vue.js.
Para começar, o Vue.js é uma das frameworks mais simples para a maioria dos desenvolvedores, já que esta framework usa JavaScript. Portanto, qualquer pessoa que tenha conhecimentos básicos de JavaScript será capaz de desenvolver com o Vue.js.
A ferramenta Vue CLI combinada com outras ferramentas de desenvolvimento front-end faz da criação do Vue.js uma brisa. Ele é configurado com alguma funcionalidade por padrão, mas você também pode construir código com uma lógica e framework DRY (Don’t Repeat Yourself).
A reatividade também está embutida no Vue.js. Isso significa que a funcionalidade em tempo real que era popular na framework Angular é uma brisa com o Vue.js. Por exemplo, você pode facilmente aplicar uma diretiva simples como o v-if em seu aplicativo do Vue.js.
A seguir, vamos discutir os principais prós e contras do Vue.js.
Prós e contras do Vue.js
O Vue.js é a segunda framework mais popular em uso hoje em dia. Vamos ver o que faz com que ela se mantenha com os desenvolvedores web, e o que os afasta.
Pros do Vue.js
Vamos começar explorando os aspectos positivos do Vue.js.
Tamanho pequeno
O Vue.js tem um tamanho muito pequeno para download de cerca de 18 KB, o que é excelente em comparação com outras frameworks com tamanhos grandes. Entretanto, com esse tamanho, o Vue.js terá um impacto positivo na SEO e UX do seu aplicativo front-end.
Componente de arquivo único e legibilidade
O Vue.js usa uma arquitetura baseada em componentes, separando assim grandes pedaços de código em componentes menores. Além disso, no Vue.js, tudo é um componente, e cada componente é escrito com HTML, CSS e JavaScript, encorajando assim a legibilidade e a simplicidade.
Sistema de ferramentas sólidas
O Vue.js suporta muitas ferramentas de desenvolvimento front-end direto da caixa com pouca ou nenhuma configuração de sua parte. Por exemplo, o Vue.js suporta ferramentas tais como Babel e Webpack. Além disso, ele fornece testes unitários, bibliotecas de teste ponta a ponta, sistemas de roteamento flexíveis e fáceis de usar, gerentes estaduais, renderização do lado do servidor (SSR), e muito mais.
Fácil de usar
Se você já usou o Vue.js antes, você concordará que é muito fácil de usar. Ele moderniza a abordagem usual de desenvolvimento web, tornando fácil para qualquer iniciante entrar e se sentir confortável com apenas algumas práticas.
Contras do Vue.js
Agora que cobrimos os profissionais, vamos explorar os aspectos negativos do Vue.js.
Complexidade de reatividade
A implementação de ligação bidirecional no Vue.js é uma ferramenta útil para gerenciar os componentes do Vue.js. A ligação bidirecional refere-se ao compartilhamento de dados entre uma classe de componentes e seu modelo, e é desenvolvida para que, se os dados mudarem em um lugar, ele atualize automaticamente os outros.
No entanto, há uma questão relativa a como a reatividade funciona enquanto o sistema de reatividade reenvia apenas os pedaços de dados disparados. Às vezes, há alguns erros durante a leitura dos dados, portanto, é necessário que os dados sejam achatados. Você pode ler esta questão conhecida e como ela é abordada no site da Vue.js.
Barreira das linguagens
Inicialmente, o Vue.js foi adotado principalmente pelos chineses, com grandes empresas como a Xiaomi e Alibaba ajudando a popularizar a framework e criando demanda no mercado de trabalho. Entretanto, com a adoção significativa de muitas empresas chinesas, muitos fóruns, canais de discussão e similares foram principalmente em chinês, tornando a adoção difícil para desenvolvedores não falantes nativos.
A partir de hoje, este não é mais o caso, pois o Vue.js evoluiu para incorporar suporte para várias linguagens, mas há algumas linguagens por aí com menos suporte do que os outros.
Riscos de sobre-flexibilidade
Como dito acima, o Vue.js é muito flexível e fácil de usar. Portanto, é fácil ter muitos códigos de spaghetti em todos os lugares, pois todos em uma equipe empresarial podem ter opiniões diferentes sobre como fazer as coisas.
Pelos prós e contras do Vue.js discutidos acima, você já deve ter percebido alguns recursos que você ama e algumas que não funcionarão bem para você.
10 Coisas que você deve saber sobre o Vue.js
Abaixo estão as dez coisas que você precisa saber sobre o Vue.js e porque é essencial conhecê-las.
Propriedades computadorizadas
Uma propriedade computada é uma das características mais utilizadas no Vue.js. Uma propriedade computada permite criar propriedades que podem ser modificadas, manipuladas e exibir dados de uma maneira eficiente e legível.
É útil quando você quer repetir muitos pequenos métodos para coisas como formatação, mudança de valores ou um vasto processo que você precisa acionar em certas situações.
As propriedades computadorizadas ajudam a remover o excesso de muita lógica em seu modelo. Muito dessa lógica pode fazer com que seu código se torne inchado e difícil de manter rapidamente.
Assumindo que você queira formatar um cordel em letras maiúsculas, aqui está como você pode fazer isso:
<template>
<div>
<p> I love {{ value.toUpperCase() }} </p>
</div>
</template>
O que acontece se você precisar mudar a variável value em 50 lugares diferentes? Bloqueado, certo? Bem, as propriedades computadas estão aqui para ajudar:
<template>
<div>
<p> I love {{ value }} </p>
</div>
</template>
<script>
export default {
computed:{
value(){
return this.value.toUpperCase()
}
}
}
</script>Você pode facilmente mudar toUpperCase() para toLowerCase(), e isso refletirá tudo a partir de um único ponto.
Manuseio de eventos
O Vue.js faz da comunicação do filho e do pai uma brisa com o uso de $emit e v-on. Torna-se fácil e simples lidar com a comunicação entre as hierarquias de componentes.
A função $emit aceita dois parâmetros: uma string para o nome e um valor opcional a ser emitido.
O nome do v-on:event-name usado no componente filho para receber o evento emitido por seu componente pai:
<template>
<section>
<button @click="onClick">Add </button>
</section>
</template>
<script>
export default {
name: "AddEvent",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>Uma vez acionado o botão Add, o método onClick aciona o evento $emit, que emite o evento add a um componente filho que escuta o evento de add.
Vamos dar uma olhada em como ouvir um evento:
<template>
<section>
<p v-show="showSaveMsg">This component is listening to the ADD event</p>
<add-event v-on:add="onAdd"></add-event>
</section>
</template>
<script>
export default {
data(){
return {
showSaveMsg: false
}
},
components:{
AddEvent: () => import('./AddEvent')
},
methods: {
onAdd() {
this.showSaveMsg = true;
}
}
}
</script>O código acima ouve o evento de add e responde mudando o valor de showSaveMsg para true, o que mostra a mensagem novamente.
Carregamento preguiçoso / Componentes Async
O carregamento preguiçoso é um dos melhores hacks de desempenho para o Vue.js, onde os componentes são adicionados e renderizados de forma assíncrona ou sob demanda, o que reduzirá significativamente o tamanho do arquivo, o tempo de resposta a solicitações HTTP e assim por diante.
O carregamento preguiçoso é alcançado com importações dinâmicas de Webpack, que também suporta divisão de código.
O Vue.js permite o carregamento preguiçoso de componentes e pode ser alcançado globalmente com os seguintes scripts:
import Vue from "vue";
Vue.component("new-component", () => import("./components/NewComponent.vue"));
Você pode consegui-lo localmente com um componente como abaixo:
<template>
<div>
<component></component>
</div>
</template>
<script>
export default {
components: {
'Component': () => import('./Component')
}
}
</script>Componentes globais
Podemos alcançar uma reusabilidade significativa no Vue.js com componentes globais, onde você registra um componente uma vez e depois o usa em qualquer lugar dentro de sua instância do Vue.js.
Componentes globais são recursos importante e podem economizar muito tempo registrando componentes individualmente cada vez, mas podem ser facilmente mal utilizados registrando todos os componentes globalmente. O registro de todos os componentes globalmente pode facilmente levar a um tamanho de construção grande, resultando em SEO deficiente e tempo de carregamento de página mais lento.
Certifique-se sempre de registrar componentes globais que tenham muitos casos de uso em todo o seu projeto, como mostrado abaixo:
import Vue from "vue";
Vue.component("new-component", () => import("./componetns/NewComponent.vue"));Componente de arquivo único
Uma das características mais poderosas do Vue.js é Componentes; ele ajuda a estender elementos HTML essenciais, CSS e JavaScript para encapsular código reutilizável.
Os componentes podem ajudar a quebrar grandes projetos em peças menores e reutilizáveis que podemos estender por todo o projeto, encorajando assim o princípio DRY (Don’t Repeat Yourself) da engenharia de software.
Ele pode fornecer organização e encapsulamentos para grandes projetos, código reutilizável, e pode ser separado em arquivos .vue.
<template>
<section>
<button @click="onClick">Add</button>
</section>
</template>
<script>
export default {
name: "CustomButtom",
methods: {
onClick() {
this.$emit('add', this.data);
}
}
}
</script>
<style scoped>
button{
/** Button Styles */
}
</style>Os scripts acima criam um componente de botão personalizado que podemos reutilizar dentro de nosso projeto. Cada componente tem seu HTML, CSS, e JavaScript.
Teste
O Vue.js fornece uma das bibliotecas de testes mais robustas, tornando os testes unitários com Jest e Mocha ou os testes de ponta a ponta uma brisa com pouca ou nenhuma configuração.
Uma rápida análise com estas ferramentas pode valer a pena para você. Então, vamos explorar a instalação, configuração e teste de um projeto demonstrativo abaixo.
Se você estiver usando a ferramenta Vue CLI recomendada para configurar seu projeto, execute os seguintes comandos:
vue add unit-jest //to run unit test with jest
npm install --save-dev @vue/test-utils
Em seguida, após a configuração, inclua o código abaixo, que demonstra como testar um componente simples:
// Import the `mount()` method from Vue Test Utils
import { mount } from '@vue/test-utils'
// The component to test
const MessageComponent = {
template: '<p>{{ message }}</p>',
props: ['message']
}
test('displays a message', () => {
// mount() returns a wrapped Vue component we can interact with
const wrapper = mount(MessageComponent, {
propsData: {
msg: 'Welcome to our testing world'
}
})
// Assert the rendered text of the component
expect(wrapper.text()).toContain('Welcome to our testing world')
})A Biblioteca de Testes de Vue tem duas ótimas opções para testar seus componentes: Montagem e Raso.
Se você quiser testar um componente com isolamento completo, use o método shallow. Caso contrário, se você precisar trabalhar em um componente com subcomponentes que deseja garantir a comunicação, a opção de mount funciona muito bem.
A poderosa ferramenta Vue CLI
A Vue CLI é uma excelente ferramenta CLI e dá um bom poder a qualquer desenvolvedor de Vue. Com ela, você pode testar rapidamente qualquer componente isoladamente. O ótimo do Vue CLI é que você pode desenvolver completamente um componente em isolamento, testá-lo e ainda ter acesso à recarga a quente à medida que você itera sobre aquele componente em particular.
Para demonstrar, vamos instalar a Vue CLI globalmente:
npm install -g @vue/cliEm seguida, você pode testar qualquer componente, executando o comando abaixo:
vue serve ./components/views/Home.vueSe você deseja retirar um determinado componente para, digamos, compartilhá-lo com seus colegas, você pode conseguir isso usando o comando abaixo:
vue build --target lib --name goldenRule ./components/views/HomeO Vue CLI é muito poderoso e pode economizar uma tonelada de tempo produtivo se você dominar a arte de usá-lo. Se você quiser saber mais, você pode dar uma olhada na documentação oficial.
Gerenciamento de propriedade
O gerenciamento de propriedade é vital para o componente Vue, pois ele pode ser criado de diferentes maneiras. Você também pode validar os adereços, criar vários adereços e modificá-los conforme necessário.
Para criar uma nova propriedade em um componente Vue, você pode fazê-lo de várias maneiras diferentes. Assumindo que você tenha seu componente, você precisa criar o adereço isAdmin.
Vejamos as diferentes maneiras que você poderia fazer isso:
<template>
<section>
<component v-if="isAdmin"></component>
</section>
</template>
<script>
export default {
name: 'Component',
// One
props: {
isAdmin: {
type: Boolean,
default: false,
required: true
}
},
// Two
props: ['isAdmin'],
// Three
props: {
isAdmin: Boolean
}
}
</script>A validação de seu adereço é muito importante. Por sorte, é também muito simples:
// ...
// One
props: {
isAdmin: {
default: false,
required: true,
validator: function(value) {
return typeof === 'boolean';
}
}
},
// ...Finalmente, modificar as propiedades é tão fácil quanto realinhar seus valores:
//...
methods: {
isAdmin() {
this.isAdmin = true;
}
}
//..
Atribuir valor ao prumo em um componente pai:
<template>
<section>
<component :isAdmin="true"></component>
</section>
</template>Renderização do lado do servidor (SSR)
Com todas as grandes características e benefícios de usar o Vue.js para criar aplicativos front-end, o próprio Vue.js ainda é uma biblioteca do lado do cliente que só renderiza e manipula elementos DOM.
A renderização do lado do servidor ajuda as frameworks do lado do cliente, como o Vue.js, a obter melhores resultados. Os rastreadores web dos mecanismos de pesquisas (Search Engine crawlers) verão páginas totalmente renderizadas do seu site.
Para ter seu site indexado pelo Google e Bing mais rapidamente, seu site precisa ter uma pontuação mais rápida e maior tempo para o conteúdo. É isso que a renderização do lado do servidor no Vue.js ajuda você a alcançar.
A renderização do lado do servidor (SSR) é uma técnica popular para renderizar um aplicativo de página única (SPA) regular do lado do cliente no servidor e depois enviar uma página totalmente renderizada para o leitor.
Quando a página é renderizada no lado do servidor, ela a envia para o cliente como resposta. Assim, cada informação já foi renderizada enquanto o navegador exibe a página do mecanismo de busca.
Alcançar a SSR no Vue.js é difícil para os iniciantes. Será mais fácil usar o Nuxt.js, que tem uma SSR incorporada e uma curva de aprendizado muito baixa.
Implantação
O Vue.js apresentará muitos avisos, erros e tamanhos de arquivos inchados durante o desenvolvimento, mas estes problemas desaparecem imediatamente quando você liga a produção para a implantação. O Vue.js configurará automaticamente ferramentas de construção de Webpack, minifications, extração e purga de CSS, cache, rastreamento de erros de tempo de execução, e muito mais.
Os clientes Kinsta podem considerar o uso do recurso embutido de minificação de código que eles podem acessar diretamente no painel MyKinsta. Isto lhes permite ativar facilmente a minificação automática de CSS e JavaScript com um simples clique.
O Vue.js torna seu processo de implantação muito fácil, configurando e configurando automaticamente o ambiente de produção sem nenhum passo extra do desenvolvedor.
Para implantar seu aplicativo Vue.js, você pode ler seus guias gerais.
Resumo
Neste artigo, exploramos em detalhes o que é o Vue.js, por que você deve usá-lo, seus prós e contras, e as 10 coisas que você deve saber sobre ele.
Esperamos que você tenha avançado seus conhecimentos sobre o Vue.js para oferecer aplicativos front-end escaláveis e de alto desempenho.
Continue codificando!
Se você tiver perguntas ou sugestões, estamos ansiosos para ouvir de você. Fale conosco na seção de comentários abaixo!
Sou um Engenheiro de Software e Criador de Conteúdo voltado para a construção de produtos de alta performance e inovadores, seguindo as melhores práticas e padrões da indústria. Também adoro escrever sobre isso no Masteringbackend.com. Siga-me no X, LinkedIn e About Me.
Deixe um comentário