Vue 3: Conhecendo mais de perto

Vinicios Neves
Vinicios Neves

Compartilhe

Nesse artigo, vamos conhecer algumas features legais do Vue 3.

logo do Vue com código no monitor de fundo #inset

Se você quer conhecer um pouco mais as funcionalidades super interessantes do Vue 3, você veio ao lugar certo.

Banner promocional da Alura, com um design futurista em tons de azul, apresentando o texto "Já sabe quais os próximos passos para seus estudos em Front-end? O Guia de Carreira em Front-end vai te ajudar nisso". À direita, está a foto de um jovem sorridente olhando para a esquerda do banner, ao lado de uma lista de tópicos oferecidos pelo guia, como "Principais cursos e formações da Alura nessa área", "Caminhos para carreira Front-end Angular e React", "Como migrar do Front-end para Back-end" e "Dicas de especialistas na área". No canto inferior direito, há um ícone de download e o texto "Baixe gratuitamente".

Em 18 de setembro de 2020, a versão 3 foi lançada oficialmente e junto com ela vieram algumas novidades muito legais:

  • Composition API
  • Vue Fragments
  • Teleport

Vamos olhar mais de perto cada uma delas.

Se esse é o seu primeiro contato com Vue, vale a pena você dar uma olhada antes na formação Vue.js da Alura e entender como esse framework funciona. Se você está acostumado com o Vue, vamos logo dar uma olhada nessas novas funcionalidades bacanas:

Composition API

Quando criamos componentes Vue, organizar o código utilizando as opções tradicionais funciona bem em muitos casos:


<script>
export default {
  name: "Modal",
  emits: ["fechar"],
  methods: {
    fechar() {
      this.$emit("fechar");
    },
    observarTeclado(evento) {
      if (evento.key === "Escape") {
        this.fechar()
      }
      return;
    },
  },
  mounted() {
    window.addEventListener("keydown", this.observarTeclado);
  },
  unmounted() {
    window.removeEventListener("keydown", this.observarTeclado);
  },
};
</script>

Esse é um componente simples que representa um modal. Mas conforme o componente cresce, junto com suas responsabilidades, teremos lógicas correlacionadas cada vez mais espalhadas dentro do nosso código.

Algo mais ou menos assim:

comparando a diferença no agrupamento de lógicas relacionadas - Options API vs Composition API #inset

Utilizando a Composition API, teríamos esse mesmo componente assim:

<script>
import { onMounted, onUnmounted } from "vue";
export default {
  name: "Modal",
  setup(props, context) {
    const fechar = () => {
      context.emit("fechar");
    };
    const observarTeclado = (evento) => {
      if (evento.key === "Escape") {
        fechar();
      }
      return;
    };
    onMounted(() => {
      window.addEventListener("keydown", observarTeclado);
    });
    onUnmounted(() => {
      window.removeEventListener("keydown", observarTeclado);
    });
    return {
      fechar
    };
  },
};
</script>

O template do componente terá acesso a todos os métodos adicionados ao objeto no retorno da função __setup__. Podemos, além disso, montar o objeto que representa o estado do componente utilizando o __ref__, função disponível para ser importada direto do Vue.

A Composition API vai muito além. Não deixe de conferir tudo o que podemos fazer na documentação oficial.

Vue Fragments

Aqui é uma mudança na sintaxe dos templates dos componentes. Na versão 2.x, os componentes precisavam exportar sempre um único elemento:

<template>
  <div>
    <h1>...</g1>
    <h2>...</h2>
    <p>...</p>
  </div>
</template>

Agora, na versão 3.x, isso não é mais necessário:

<template>
    <h1>...</g1>
    <h2>...</h2>
    <p>...</p>
</template>

Porém, ao utilizar a nova sintaxe, a desenvolvedora ou o desenvolvedor precisam explicitar qual elemento herdará os atributos do elemento pai, desse jeito:

<template>
    <h1>...</g1>
    <h2>...</h2>
    <p v-bind="$attrs">...</p>
</template>

Teleport

Geralmente, utilizamos componentes aninhados para compor as partes da nossa aplicação. É uma prática comum e super encorajada. Porém, em alguns casos, queremos que alguns componentes estejam agrupados logicamente, mas que sejam renderizados em outro lugar do DOM. Como, por exemplo, uma modal que cubra toda a tela (normalmente com aquele fundo preto opaco tradicional).

É exatamente isso que o Teleport nos oferece de forma extremamente simples (repare que o nome mudou, ele era chamado de Portal nas primeiras versões). Basta envolver o trecho html que queremos teleportar num componente chamado, pasme, <teleport>. Esse mesmo componente espera uma prop chamada to, que é o destino do teleport.

Por exemplo, podemos solicitar que a modal seja teleportada para a tag <body>:

<template>
  <teleport to="body">
    <div v-if="aberta" class="modal-bacana">
      <!-- interior da modal -->
    </div>
  </teleport>
</template>

Para saber mais detalhes sobre as funcionalidades citadas acima e ficar por dentro de outras novidades disponíveis(inclusive algumas ainda experimentais), confira a documentação oficial.

Pronto para se aventurar? Se você curtiu o que temos de novidade, vale a pena conferir também o guia de migração e começar a traçar os seus planos para migrar para a nova versão.

Se você gosta de Vue e quer se aprofundar um pouco mais, conheça o curso Vue.js: Protegendo recursos com autenticação e VueX, aqui na Alura!

Te vejo numa próxima, até mais!

Vinicios Neves
Vinicios Neves

Vinicios Neves, Tech Lead e Educador, mistura código e didática há mais de uma década. Especialista em TypeScript, lidera equipes full-stack em Portugal e inspira futuros desenvolvedores na FIAP e Alura. Com um pé no código e outro no ensino, ele prova que a verdadeira engenharia de software vai além das linhas de código. Além de, claro, ser senior em falar que depende.

Veja outros artigos sobre Front-end