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
.