Асинхронные компоненты
Асинхронные компоненты
Иногда бывает удобно разделить крупное приложение на части и подгружать компоненты с сервера только тогда, когда в них возникнет потребность. Для этого Vue позволяет определить компонент как функцию-фабрику, асинхронно возвращающую определение компонента. Vue вызовет фабричную функцию только тогда, когда компонент действительно понадобится, и закэширует результат для дальнейшего использования. Например:
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// Передаём определение компонента в коллбэк resolve
resolve({
template: '<div>Я — асинхронный!</div>'
})
}, 1000)
})
Функция-фабрика принимает параметр resolve
— коллбэк, который вызывается после того, как определение компонента получено от сервера. Кроме того, можно вызвать reject(reason)
, если загрузка по какой-либо причине не удалась. Мы используем setTimeout
исключительно в демонстрационных целях; как именно получать компонент в реальной ситуации — решать только вам самим. Один из удачных подходов — это использовать асинхронные компоненты в связке с функциями Webpack по разделению кода:
Vue.component('async-webpack-example', function (resolve) {
// Специальный синтаксис require укажет Webpack
// автоматически разделить сборку на части
// для последующей асинхронной загрузки
require(['./my-async-component'], resolve)
})
Вы также можете вернуть Promise
в функции-фабрике, так что с Webpack 2 и синтаксисом ES2015 можно сделать так:
Vue.component(
'async-webpack-example',
// Функция `import` возвращает Promise.
() => import('./my-async-component')
)
При использовании локальной регистрации компонентов, вы также можете непосредственно указывать функцию, которая возвращает Promise
:
new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})
Управление состоянием загрузки
Фабрика асинхронного компонента также может возвращать объект следующего формата:
const AsyncComponent = () => ({
// Загружаемый компонент. Значение должно быть Promise
component: import('./MyComponent.vue'),
// Компонент загрузки, используемый пока загружается асинхронный компонент
loading: LoadingComponent,
// Компонент ошибки, используемый при неудачной загрузке
error: ErrorComponent,
// Задержка перед показом компонента загрузки. По умолчанию: 200 мс.
delay: 200,
// Компонент ошибки будет отображаться, если таймаут
// был указан и время ожидания превышено. По умолчанию: Infinity.
timeout: 3000
})
Обратите внимание, что вы должны использовать Vue Router версии 2.4.0+ если вы хотите использовать указанный выше синтаксис для компонентов маршрута.
Last updated
Was this helpful?