Guía

Componentes Dinámicos & Asíncronos

Esta página asume que usted ya ha leído Conceptos Básicos de Componentes. Lea eso primero si usted es nuevo con respecto a componentes.

keep-alive con Componentes Dinámicos

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

<component v-bind:is="currentTabComponent"></component>

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

Notará que si selecciona una publicación, cambie a la pestaña Archivo, luego vuelva a Publicaciones, 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>:

<!-- Inactive components will be cached! -->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

Eche un vistazo a los resultados a continuación:

Ahora la pestaña Publicaciones mantiene su estado (la publicación seleccionada) incluso cuando no está renderizada. Vea este fiddle para ver el código completo.

Tenga en cuenta que <keep-alive> requiere que los componentes se cambien para que todos tengan nombres, ya sea utilizando la opción de nombre en un componente o mediante el registro local/global.

Por más detalles sobre <keep-alive> eche un vistazo a Referencia en la 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 le permite definir su componente como una función de fábrica que resuelve de forma asíncrona su definición de componente. Vue solo activará la función de fábrica cuando el componente necesita ser procesado y almacenará el resultado en caché para futuras repeticiones. Por ejemplo:

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Pasa la definición del componente a la función callback `resolve`
    resolve({
      template: '<div>¡Soy asíncrono!</div>'
    })
  }, 1000)
})

Como puede ver, la función de fábrica recibe una función callback resolve, que debe llamarse cuando haya recuperado su definición de componente del servidor. También puede llamar a reject(motivo) para indicar que la carga ha fallado. El setTimeout aquí es para demostración; Cómo recuperar el componente depende de usted. Un enfoque recomendado es utilizar componentes asíncronos junto con la funcionalidad de división de código de Webpack:

Vue.component('async-webpack-example', function (resolve) {
  // Esta sintaxis de requerimiento especial le indicará a Webpack que
  // divida automáticamente su código construido en paquetes
  // que se cargan a través de solicitudes Ajax.
  require(['./my-async-component'], resolve)
})

También puedes devolver una Promesa en la función de fábrica, así que con la sintaxis de Webpack 2 y ES2015 puede hacer:

Vue.component(
  'async-webpack-example',
  // La función `import` devuelve una Promesa.
  () => import('./my-async-component')
)

Al usar registro local, también es posible proporcionar directamente una función que devuelva una Promesa:

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

Si usted es un usuario de Browserify que quiere usar componentes asíncronos, su creador desafortunadamente dejó en claro que la carga asíncrona “no es algo que Browserify nunca apoyará.” oficialmente, al menos. La comunidad Browserify ha encontrado algunas soluciones, que pueden ser útiles para aplicaciones existentes y complejas. Para todos los demás escenarios, recomendamos el uso de Webpack para el soporte asíncrono integrado de primera clase.

Manejo del estado de carga

Nuevo en 2.3.0+

La fábrica de componentes asíncronos también puede devolver un objeto con el siguiente formato:

const AsyncComponent = () => ({
  // El componente a cargar (debe ser una Promesa)
  component: import('./MyComponent.vue'),
  // Un componente para usar mientras se carga el componente asíncrono
  loading: LoadingComponent,
  // Un componente para usar si la carga falla.
  error: ErrorComponent,
  // Retraso antes de mostrar el componente de carga. Predeterminado: 200ms.
  delay: 200,
  // El componente de error se mostrará si se proporciona un tiempo de espera
  // excedido. Predeterminado: Infinito.
  timeout: 3000
})

Observe que debe usar Vue Router 2.4.0+ si desea usar la sintaxis previa para componentes de ruta.

← Slots Handling Edge Cases →
¿Encontró un error o simplemente quiere contribuir con la documentación? Edite esta página en GitHub! Puesto en marcha en Netlify