Vue.js

# Componentes Assíncronos
new

# Visão Geral

Sobre o que mudou, em visão geral:

  • Novo método helper defineAsyncComponent que define explicitamente componentes assíncronos
  • Opção component renomeada para loader
  • Função Loader não recebe inerentemente os argumentos resolve e reject e deve retornar uma Promise

Para uma explicação mais aprofundada, continue lendo!

# Introdução

Anteriormente, componentes assíncronos eram criados simplesmente definindo um componente como uma função que retornava uma Promise, tal como:

const asyncModal = () => import('./Modal.vue')
1

Ou, para os componentes com sintaxe mais avançada com opções:

const asyncModal = {
  component: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}
1
2
3
4
5
6
7

# Sintaxe v3.x

Agora, no Vue 3, uma vez que os componentes funcionais são definidos como funções puras, as definições de componentes assíncronos precisam ser definidas explicitamente, envolvendo-o em um novo helper defineAsyncComponent:

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// Componente Assíncrono sem opções
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// Componente Assíncrono com opções
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

NOTA

O Vue Router suporta um mecanismo similar para carregar componentes de rota de maneira assíncrona, conhecido como lazy loading. Apesar das similaridades, este recurso é distinto do suporte do Vue para componentes assíncronos. Você não deve usar defineAsyncComponent ao configurar componentes de rota com o Vue Router. Você pode ler mais sobre isso na seção Lazy Loading Routes (opens new window) da documentação do Vue Router.

Outra mudança em relação a v2.x é a de que a opção component foi renomeada para loader a fim de comunicar com precisão que uma definição de componente não pode ser fornecida diretamente.




 






import { defineAsyncComponent } from 'vue'

const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})
1
2
3
4
5
6
7
8
9

Além disso, ao contrário da versão 2.x, a função loader não recebe mais os argumentos resolve e reject, e deve sempre retornar uma Promise.

// Versão 2.x
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}

// Versão 3.x
const asyncComponent = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      /* ... */
    })
)
1
2
3
4
5
6
7
8
9
10
11
12

Para mais informações sobre o uso de componentes assincronos, leia:

← Comportamento da Coerção de Atributo →