O suspense é uma featured que foi implementada no Vue 3. O suspense é um componente especial como o transition, e pode ser utilizado para colocar um “loading” na tela enquanto um componente não carrega por completo.
O que mostra que um componente finalizou o seu carregamento por completo, é quando a função setup
finaliza o seu processamento. O setup, basicamente falando, é a função que entrou pra substituir o data
.
Antes dessa feature, era necessário criar algumas variáveis para saber se o componente foi carregado, se ele carregou e não tem dados, ou se ainda está carregando, para que fosse possível colocar o comportamento de “loading”” na tela. Com o suspense, isso fica mais implícito, facilitando a escrita desse tipo de componente, e o entendimento para quem está lendo.
Estruturalmente, é um componente mais tranquilo de visualizar e entender o que está fazendo, veja um exemplo:
<Suspense> <template #default> <ListaDeProdutos /> </template> <template #fallback> <div>Carregando...</div> </template> </Suspense>
No caso, o componente <Suspense> envolve o componente que será renderizado. O primeiro template, significa que será mostrado na tela, o componente que está dentro dele, porém só será renderizado, assim que a função setup dele finalizar seu processamento. O segundo template, que é o que contém a #fallback, irá ser mostrado na tela enquanto a função setup do componente ListaDeProdutos não finaliza o seu processamento.
Dentro do template #default, é possível colocar diversos componentes, e o próprio suspense irá continuar fazendo seu controle normalmente, porém, só irá exibir todos os componentes, assim que a função setup
de todos sejam processadas.
<Suspense> <template #default> <ListaDeProdutos /> <ListaDeClientes /> <InformacoesDoCaixa /> </template> <template #fallback> <div>Carregando...</div> </template> </Suspense>
Para este exemplo, vou utilizar uma instalação padrão do Vue. Nesse projeto, irei criar um componente chamado ListProductsComponent.vue, dentro do diretório de componentes, dentro dele só terá um texto e o componente setup com um setTimeout para simular uma função assíncrona, dessa forma:
//ListProductsComponent.vue <template> <div> teste de componente de listagem </div> </template> <script> export default { name: 'ListProductsComponent', async setup(){ const promise = new Promise( (resolve) => { setTimeout(function(){ resolve('Sucess'); }, 4000); }); const product = await promise; return { product } } } </script>
Com isso, esse componente irá demorar 4 segundos para finalizar o processamento dos dados que estão dentro do setup.
Posterior a criação do componente, será necessário realizar a importação deste, dentro do App.vue. Depois de importado, agora é preciso colocar o componente suspense, e os templates default e de fallback, para que tudo funcione corretamente, o App.vue deve ficar assim:
//App.vue <template> <img alt="Vue logo" src="./assets/logo.png"> <Suspense> <template #default> <list-products-component /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense> </template> <script> import ListProductsComponent from './components/ListProductsComponent.vue' export default { name: 'App', components: { ListProductsComponent } } </script>
Com esse código, o resultado será que quando carregar a tela, irá aparecer a tela de loading, e só depois de 4 segundos que irá aparecer o componente com o texto adicionado.
Caso você prefira acessar esse conteúdo em vídeo, gravei um completo sobre esse assunto, no vídeo tem um slide detalhado sobre cada ponto do Suspense, mostrando passo a passo na teoria, e também tem um exemplo prático de como realizar a criação de um projeto com o Vue3, e a implementação do componente Suspense, veja o vídeo:
O Vue 3 irá adicionar novas funcionalidades a fim de melhorar o desenvolvimento, o processamento, deixar projetos mais leves, e entre outras coisas. Essa é uma das novidades dessa versão, em breve irei trazer mais conteúdos sobre o Vue 3, até o próximo post 🙂
Rererências:
https://vuejsdevelopers.com/2020/07/13/vue-async-components-suspense/
https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/
O Figma é uma ferramenta de design colaborativa, online e gratuita, que não requer nenhum…
Os testes A/B são uma das formas mais eficientes e conhecidas para otimizar os resultados…
Neste artigo vamos listar 6 Sites para baixar texturas grátis para compor projetos de design,…
O Design Thinking, que se refere ao "pensamento do design" ou "pensar como um designer",…
A internet oferece um mundo de oportunidades para ganhar uma renda extra. Neste artigo, apresentamos…
Neste artigo, apresentaremos uma lista dos melhores plugins de SEO para WordPress, que podem ajudar…