Vue.js

# Componentes Asíncronos
new

# Visión General

Aquí es una visión general de alto nivel de los que ya han cambiado:

  • Nuevo método de ayuda defineAsyncComponent que explícitamente define componentes asíncronos
  • La opción component es renombrada a loader
  • Función de cargador no recibe inherentemente argumentos resolve y reject y debe retornar un Promise

Para una explicación más profundo, ¡sigue leyendo!

# Introducción

Anteriormente, los componentes asíncronos son creados mediante simplemente definir un componente como una función que retorne un Promise, tal como:

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

O, para la más avanzada sintaxis de componente con opciones:

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

# Sintaxis para 3.x

Ahora, en Vue 3, debido a que componentes funcionales son definidos como funciones puras, las definiciones de componentes asíncronos necesitan ser definidas mediante envolverla en un nuevo ayudante defineAsyncComponent helper:

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

// Componente asíncrono sin opciones
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// Componente asíncrono con opciones
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

NOTE

Vue Router soporta un mecanismo similar para cargar componentes de ruta asíncronamente, conocido como cargamiento perezoso (lazy loading). Pese a las semejanzas, esta característica es distinta del soporte Vue para components asíncronos. No debe utilizar defineAsyncComponent cuando configura componentes de ruta con Vue Router. Puede leer más sobre este en la sección rutas cargadas perezosamente (opens new window) de la documentación de Vue Router.

Otro cambio que se ha hecho desde 2.x es que la opción component ahora es renombrada a loader para informar con prcisión que una definición de componente no se puede proveer directamente.




 






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

Además, al contrario de 2.x, la función de cargador ya no recibe los argumentos resolve y reject y debe siempre retornar un Promise.

// versión 2.x
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}

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

Para más información sobre el uso de componentes asíncronos, vea:

← Comportamiento de Coacción de Atributos →