Introdução
O Fragments é mais uma das novas features do Vue 3, e ela resolve um “problema” existente no Vue 2, que não é tanto um problema, mas não era possível fazer.
Essa feature foi incorporada de algo que já tinha no React, e a motivação para ter essa funcionalidade no React foi a possibilidade de um componente retornar uma lista de filhos, como por exemplo as colunas de uma tabela.
Com isso agora também no Vue 3, um componente pode ter vários “nós” dentro dele, ou seja, um componente não precisa retornar só uma tag HTML, pode retornar várias.
Benefícios do Fragments
Com a adição dessa feature, não é mais necessário instalar alguma biblioteca como o vue-fragment ou então colocar tudo que está dentro do componente em uma div.
Outro benefício interessante, é que agora um componente poderá retornar uma lista ou algo renderizado em um v-for diretamente no retorno.
Fragments na prática
Um componente do Vue2 quando tem várias tags HTML dentro dele, precisava adicionar uma div em volta de tudo para que funcionasse, da seguinte forma:
<template>
<div>
<p>Olá mundo</p>
<div>Está é uma div</div>
</div>
</template>
Já no Vue 3 isso é normal um componente que irá retornar mais de uma tag HTML, dessa forma:
<template>
<p>Olá mundo</p>
<div>Está é uma div</div>
</template>
Outro exemplo de como isso pode ser utilizado, é caso precise retornar uma lista de elementos em um componente, que antes, mesmo que no Vue2, mesmo que fosse uma lista renderizada com o v-for, era necessário colocar a div. Agora é possível retornar o v-for diretamente:
<template>
<p v-for="usuario in usuarios">
{{ usuario.nome }}
</p>
</template>
Para saber mais
Gravei um vídeo sobre o Fragments, mostrando como ele funciona e mostrando exemplo prático:
Conclusão
O fragments é uma implementação que já era pedida pela comunidade do Vue e agora foi colocado de forma nativa na linguagem, é interessante que o Vue olha para os pontos a serem melhorados e colocam em implementações futuras, essa é uma feature que irá abrir novas possibilidades pro desenvolvimento. Até o próximo post 🙂
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Referências
https://v3.vuejs.org/guide/migration/fragments.html#overview
https://www.grapecity.com/blogs/whats-new-in-vue-3