Vue 3: Conhecendo mais de perto

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.

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 Lisboa 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