Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим, как создавать асинхронные компоненты, у которых есть собственные компоненты загрузки и ошибок.

Создание асинхронных компонентов с приложениями, созданными с помощью Vue CLI

Приложения Vue, созданные с помощью Vue CLI, имеют встроенную поддержку динамического импорта, что нам и нужно для создания асинхронного компонента.

Динамический импорт является асинхронным. Следовательно, нам нужны компоненты для отображения чего-либо, когда компонент загружается. Кроме того, нам нужен другой компонент для отображения чего-либо в случае ошибки при загрузке компонента.

Когда мы регистрируем асинхронный компонент, мы также должны зарегистрировать компоненты, которые используются при загрузке асинхронного компонента и при возникновении ошибки.

Чтобы создать компоненты и зарегистрировать их, мы можем написать следующий код:

components/AsyncComponent.vue :

<template>
  <p>Async Component</p>
</template>

components/AsyncError.vue :

<template>
  <p>Error</p>
</template>

components/AsyncLoading.vue :

<template>
  <p>Loading</p>
</template>

App.vue :

<template>
  <div id="app">
    <async-component></async-component>
  </div>
</template>
<script>
import AsyncError from "./components/AsyncError.vue";
import AsyncLoading from "./components/AsyncLoading.vue";
const AsyncComponent = import("./components/AsyncComponent.vue");
export default {
  name: "App",
  components: {
    AsyncComponent: () => ({
      component: AsyncComponent,
      loading: AsyncLoading,
      error: AsyncError,
      delay: 100,
      timeout: 3000
    })
  }
};
</script>

Как видно из приведенного выше кода, мы регистрируем асинхронный компонент иначе, чем обычный компонент Vue.

Чтобы зарегистрировать асинхронный компонент, имя свойства - это имя компонента, как обычно, но значение - это функция стрелки, которая возвращает объект с несколькими свойствами.

Функция import загружает асинхронный компонент из пакета, отличного от пакета, который импортируется статически, поэтому мы не хотим тратить время при первой загрузке приложения в ожидании загрузки асинхронных компонентов.

Свойство component содержит загружаемый компонент. loading - это компонент, который отображается при загрузке асинхронного компонента, error - это компонент, который отображается при возникновении ошибки. delay - задержка перед отображением компонента. timeout - это когда Vue прекращает попытки загрузить асинхронный компонент и отображает компонент ошибки.

delay и timeout измеряются в миллисекундах.

Затем мы загружаем асинхронный компонент, как и любой другой компонент. Затем, когда мы загружаем асинхронный компонент, мы увидим Загрузка, а затем отобразится асинхронный компонент.

Заключение

Асинхронные компоненты позволяют нам создавать компонент со статусом загрузки и состоянием ошибки, чтобы мы могли что-то видеть во время загрузки асинхронного компонента. Это полезно для разделения кода, поскольку асинхронный компонент загружается только тогда, когда он требуется из другого пакета с функцией import.