10 Coisas que Você Precisa Saber Sobre o Framework Front-end Vue.js

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/cli

Em seguida, você pode testar qualquer componente, executando o comando abaixo:

vue serve ./components/views/Home.vue

Se 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/Home

O 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!