Función Vue3 defineAsyncComponent()

Vue3 全局 APIAPI global de Vue3

defineAsyncComponent()Es una función introducida en Vue 3 para cargar componentes de forma asíncrona. Te permite cargar un componente solo cuando sea necesario, en lugar de cargar todos los componentes al iniciar la aplicación. Esto es muy útil para optimizar el rendimiento de aplicaciones grandes y reducir el tiempo de carga inicial.

¿Por qué usar defineAsyncComponent()?

Al desarrollar aplicaciones grandes, si todos los componentes se cargan al inicio de la aplicación, el tiempo de carga inicial puede ser demasiado largo y afectar la experiencia del usuario. Al usardefineAsyncComponent(), puedes diferir la carga de ciertos componentes y cargarlos solo cuando el usuario acceda a la página o funcionalidad correspondiente, mejorando así el rendimiento de la aplicación.

¿Cómo usar defineAsyncComponent()?

Uso básico

Para usardefineAsyncComponent(), debes importarlo desde Vue y pasarlo al componente que necesita carga asíncrona. A continuación se muestra un ejemplo sencillo:

Ejemplo

import { defineAsyncComponent } from 'vue';

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

export default {
  components: {
    AsyncComponent
  }
};

En este ejemplo,MyComponent.vueel componente se cargará de forma asíncrona cuando sea necesario.

Manejo del estado de carga

defineAsyncComponent()También te permite definir estados de carga, como cargando o error de carga. Puedes configurar estos estados pasando un objeto:

Ejemplo

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent, // Componente que se muestra durante la carga
  errorComponent: ErrorComponent, // Componente que se muestra cuando falla la carga
  delay: 200, // Tiempo de retraso para mostrar el componente de carga (milisegundos)
  timeout: 3000 // Tiempo de espera de carga (milisegundos)
});

En esta configuración,LoadingComponentse mostrará mientras se carga el componente,ErrorComponenty se mostrará cuando la carga falle.

Manejo de errores

Si el componente falla al cargar,defineAsyncComponent()proporciona unaonErrorfunción de devolución de llamada (callback) para manejar el error:

Ejemplo

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  onError(error, retry, fail, attempts) {
    if (error.message.includes('Failed to fetch dynamically imported module')) {
      retry(); // Reintentar la carga
    } else {
      fail(); // Abandonar la carga
    }
  }
});

En este ejemplo, si la carga falla, puedes elegir reintentar la carga o abandonarla.

Casos de aplicación práctica

Carga de rutas bajo demanda

En Vue Router, puedes usardefineAsyncComponent()para cargar componentes de ruta bajo demanda:

Ejemplo

import { defineAsyncComponent } from 'vue';

const routes = [
  {
    path: '/about',
    component: defineAsyncComponent(() => import('./views/AboutView.vue'))
  }
];

De esta manera,AboutView.vueel componente solo se cargará cuando el usuario acceda a la ruta/abouty no antes.

Carga diferida (lazy load) de componentes grandes

Para ciertos componentes grandes, puedes usardefineAsyncComponent()para retrasar su carga y reducir el tiempo de carga inicial:

Ejemplo

const LargeComponent = defineAsyncComponent(() =>
  import('./components/LargeComponent.vue')
);

Vue3 全局 APIAPI global de Vue3

Otras extensiones