Vue.js

# Componentes Dinámicos & Asíncronos

Esta página asume que usted ya ha leído Básicos de Componentes. Léalo primero si usted es nuevo con componentes.

# keep-alive con Componentes Dinámicos

Anteriormente, usamos el atributo is para cambiar entre componentes en una interfaz con pestañas:

<component :is="currentTabComponent"></component>
1

Sin embargo, al cambiar entre estos componentes, a veces querrá mantener su estado o evitar la re-renderización por motivos de rendimiento. Por ejemplo, al expandir nuestra interfaz con pestañas:

See the Pen Componentes Dinámicos: sin keep-alive by Vue (@Vue) on CodePen.

Notará que si selecciona una publicación, cambie a la pestaña Archive, luego vuelva a Posts, ya no se muestra la publicación que seleccionó. Esto se debe a que cada vez que cambia a una nueva pestaña, Vue crea una nueva instancia de currentTabComponent.

La recreación de componentes dinámicos suele ser un comportamiento útil, pero en este caso, nos gustaría que esas instancias de componentes de pestañas se almacenen en caché una vez que se crean por primera vez. Para resolver este problema, podemos envolver nuestro componente dinámico con un elemento <keep-alive>:

<!-- ¡Componentes inactivos se almacenarán en caché! -->
<keep-alive>
  <component :is="currentTabComponent"></component>
</keep-alive>
1
2
3
4

Eche un vistazo a los resultados a continuación:

See the Pen Componentes Dinámicos: con keep-alive by Vue (@Vue) on CodePen.

Ahora la pestaña Posts mantiene su estado (la publicación seleccionada) incluso cuando no está renderizada.

Por más detalles sobre <keep-alive> eche un vistazo a Referencia de API.

# Componentes asíncronos

En aplicaciones grandes, es posible que tengamos que dividir la aplicación en partes más pequeñas y solo cargar un componente del servidor cuando sea necesario. Para facilitarlo, Vue proporciona un método defineAsyncComponent:

const { createApp, defineAsyncComponent } = Vue

const app = createApp({})

const AsyncComp = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      resolve({
        template: '<div>I am async!</div>'
      })
    })
)

app.component('async-example', AsyncComp)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Como puede ver, este método recibe una función de fábrica que retorna un Promise. la callback resolve del Promise debería llamarse cuando haya recuperado su definición de componente desde el servidor. También puede llamar a reject(motivo) para indicar que la carga ha fallado.

Puede también retornar un Promise en la función de fábrica, así que con Webpack 2 o más avanzado y la sintaxis ES2015 puede hacer esto:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)
1
2
3
4
5
6
7

Puede también utilizar defineAsyncComponent cuando Registar un componente localmente:

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})
1
2
3
4
5
6
7
8
9
10

# Utilizar con Suspense

Los componentes asíncronos soportan suspenderse (suspensible) por defecto. Esto significa que si tiene un <Suspense> en la cadena de los componentes padres, será tratado como una dependencia asíncrona de ese <Suspense>. En este caso, el estado de cargamento será controlado por el <Suspense>, y sus propios estados como cargamento, error, demora y las opciones de tiempo de espera serán ignorado.

El componente asíncrono puede excluir el control de Suspense y dejar que el componente simpre controlar sus propios estados de cargamento mediante especificar suspensible: false en sus opciones.

Puede consultar la lista de opciones disponibles en la Referencia de API.

← refs de Plantillas →