Vue3 defineAsyncComponent() Function

Vue3 全局 APIVue3 Global API

defineAsyncComponent()It is a function introduced in Vue 3 for loading components asynchronously. It allows you to load a component only when needed, rather than loading all components at once when the application starts. This is very useful for optimizing the performance of large applications and reducing initial load time.

Why use defineAsyncComponent()?

When developing large applications, if all components are loaded at application startup, it may cause the initial load time to be too long, affecting user experience. By usingdefineAsyncComponent(), you can delay loading certain components. Only when users visit the relevant page or feature are these components loaded, thereby improving the performance of the application.

How to use defineAsyncComponent()?

Basic Usage

To usedefineAsyncComponent(), you need to import it from Vue and pass it to the component that needs to be loaded asynchronously. The following is a simple example:

Example

import { defineAsyncComponent } from 'vue';

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

export default {
  components: {
    AsyncComponent
  }
};

In this example,MyComponent.vuethe component will be loaded asynchronously when needed.

Handling Loading States

defineAsyncComponent()It also allows you to define loading states, such as loading, load failure, etc. You can configure these states by passing an object:

Example

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent, // Component displayed while loading
  errorComponent: ErrorComponent, // Component displayed when loading fails
  delay: 200, // Delay before showing the loading component (ms)
  timeout: 3000 // Loading timeout (ms)
});

In this configuration,LoadingComponentwill be displayed while the component is loading,ErrorComponentwill be displayed when loading fails.

Error Handling

If the component fails to load,defineAsyncComponent()provides aonErrorcallback function to handle errors:

Example

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

In this example, if loading fails, you can choose to retry loading or give up loading.

Practical Use Cases

On-Demand Route Loading

In Vue Router, you can usedefineAsyncComponent()to load route components on demand:

Example

import { defineAsyncComponent } from 'vue';

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

In this way,AboutView.vuethe component will only be loaded when the user visits/aboutthe route.

Lazy Loading Large Components

For some large components, you can usedefineAsyncComponent()to load them lazily, reducing the initial loading time:

Example

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

Vue3 全局 APIVue3 Global API

Other Extensions