Suspense - Vue 3
Tags: vue, vue3
Published: 2020-10-13 01:45:52

<h2>Introdução</h2>
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 <code>setup </code>finaliza o seu processamento. O setup, basicamente falando, é a função que entrou pra substituir o <code>data</code>.

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.


<h2>Estrutura do Suspense</h2>
Estruturalmente, é um componente mais tranquilo de visualizar e entender o que está fazendo, veja um exemplo:
<pre class="wp-block-syntaxhighlighter-code">&lt;Suspense>
  &lt;template #default>
    &lt;ListaDeProdutos />
  &lt;/template>
  &lt;template #fallback>
    &lt;div>Carregando...&lt;/div>
  &lt;/template>
&lt;/Suspense></pre>

No caso, o componente &lt;Suspense&gt; 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.

<h2>Múltiplos componentes</h2>
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 <code>setup </code>de todos sejam processadas.

<pre class="wp-block-syntaxhighlighter-code">&lt;Suspense>
  &lt;template #default>
    &lt;ListaDeProdutos />
    &lt;ListaDeClientes />
    &lt;InformacoesDoCaixa />
  &lt;/template>
  &lt;template #fallback>
    &lt;div>Carregando...&lt;/div>
  &lt;/template>
&lt;/Suspense></pre>


<h2>Exemplo prático</h2>

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:

<pre class="wp-block-syntaxhighlighter-code">//ListProductsComponent.vue
&lt;template>
  &lt;div>
      teste de componente de listagem 
  &lt;/div>
&lt;/template>

&lt;script>
export default {
    name: 'ListProductsComponent',
    async setup(){
        const promise = new Promise( (resolve) => {
            setTimeout(function(){
                resolve('Sucess');
            }, 4000);
        });

        const product = await promise;
        return {
            product
        }
    }
}
&lt;/script></pre>


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:

<pre class="wp-block-syntaxhighlighter-code">//App.vue
&lt;template>
  &lt;img alt="Vue logo" src="./assets/logo.png">

  &lt;Suspense>
    &lt;template #default>
      &lt;list-products-component />
    &lt;/template>
    &lt;template #fallback>
      &lt;div>Loading...&lt;/div>
    &lt;/template>
&lt;/Suspense>
  
&lt;/template>

&lt;script>
import ListProductsComponent from './components/ListProductsComponent.vue'

export default {
  name: 'App',
  components: {
    ListProductsComponent
  }
}
&lt;/script></pre>

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.

<h2>Vídeo completo sobre o Suspense</h2>

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:

https://youtu.be/RI3CvQcXJwE

<h2>Conclusão</h2>

<p>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 :)</p>

<p>Rererências:</p>
https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/

https://vuejsdevelopers.com/2020/07/13/vue-async-components-suspense/