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.

O Vue.js é a segunda estrutura de frontend mais popular.
O Vue.js é a segunda framework front-end mais popular. (Fonte: State of JS 2020)
Boas notícias: os novos recursos adicionados ao Vue.js 3 fazem dele uma escolha ainda melhor para seu próximo projeto 😄 Confira-os neste guia ⬇️Clique para Tweetar

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.

Curioso sobre o Vue.js 3? 👀 Saiba como ele pode ajudá-lo a fornecer aplicativos front-end escaláveis e de alto desempenho neste guia ⬇️Clique para Tweetar

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!


Obtenha todos os seus aplicativos, banco de dados e Sites WordPress on-line e sob o mesmo teto. Nossa plataforma de nuvens de alto desempenho e repleta de recursos inclui:

  • Fácil configuração e gerenciamento no painel MyKinsta
  • Suporte especializado 24/7
  • O melhor hardware e rede do Google Cloud Platform, alimentado por Kubernetes para a máxima escalabilidade
  • Integração Cloudflare de nível empresarial para velocidade e segurança
  • Audiência global com centros de dados de até 35 e 275+ PoPs no mundo todo

Teste você mesmo com um desconto de 20 dólares em seu primeiro mês de Hospedagem de Aplicativos ou Hospedagem de Banco de Dados. Explore nossos planos ou entre em contato com as vendas para encontrar seu melhor ajuste.