Функция defineAsyncComponent() в Vue3

Vue3 全局 APIГлобальный API Vue3

defineAsyncComponent()Это функция, представленная в Vue 3 для асинхронной загрузки компонентов. Она позволяет загружать компонент только при необходимости, а не загружать все компоненты сразу при запуске приложения. Это очень полезно для оптимизации производительности больших приложений и сокращения времени начальной загрузки.

Зачем использовать defineAsyncComponent()?

При разработке больших приложений, если все компоненты загружаются при запуске приложения, это может привести к слишком долгому времени начальной загрузки, что влияет на пользовательский опыт. ИспользуяdefineAsyncComponent(), вы можете отложить загрузку определённых компонентов. Эти компоненты загружаются только тогда, когда пользователи посещают соответствующую страницу или функцию, тем самым улучшая производительность приложения.

Как использовать defineAsyncComponent()?

Базовое использование

Чтобы использоватьdefineAsyncComponent(), вам нужно импортировать его из Vue и передать компоненту, который должен загружаться асинхронно. Ниже приведён простой пример:

Пример

import { defineAsyncComponent } from 'vue';

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

export default {
  components: {
    AsyncComponent
  }
};

В этом примере,MyComponent.vueкомпонент будет загружен асинхронно, когда это потребуется.

Обработка состояний загрузки

defineAsyncComponent()Он также позволяет определять состояния загрузки, такие как загрузка, ошибка загрузки и т. д. Вы можете настроить эти состояния, передав объект:

Пример

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent, // Компонент, отображаемый во время загрузки
  errorComponent: ErrorComponent, // Компонент, отображаемый при ошибке загрузки
  delay: 200, // Задержка перед показом компонента загрузки (ms)
  timeout: 3000 // Тайм-аут загрузки (ms)
});

В этой конфигурации,LoadingComponentбудет отображаться, пока компонент загружается,ErrorComponentбудет отображаться при сбое загрузки.

Обработка ошибок

Если компонент не удаётся загрузить,defineAsyncComponent()предоставляетonErrorфункцию обратного вызова для обработки ошибок:

Пример

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  onError(error, retry, fail, attempts) {
    if (error.message.includes('Failed to fetch dynamically imported module')) {
      retry(); // Повторить загрузку
    } else {
      fail(); // Прервать загрузку
    }
  }
});

В этом примере, если загрузка не удалась, вы можете либо повторить загрузку, либо отказаться от загрузки.

Практические примеры использования

Загрузка маршрутов по требованию

В Vue Router можно использоватьdefineAsyncComponent()чтобы загружать компоненты маршрутов по требованию:

Пример

import { defineAsyncComponent } from 'vue';

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

Таким образом,AboutView.vueкомпонент будет загружен только тогда, когда пользователь посетит/aboutмаршрут.

Ленивая загрузка больших компонентов

Для некоторых больших компонентов можно использоватьdefineAsyncComponent()чтобы загружать их лениво, сокращая время начальной загрузки:

Пример

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

Vue3 全局 APIГлобальный API Vue3

Другие расширения