Vue 3: Conhecendo mais de perto

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

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!

Vue 3: Conhecendo mais de perto

Composition API

Vue Fragments

Teleport

Cursos