Vue 3: Conhecendo mais de perto

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:

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:

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

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:

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

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

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

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!