Vue.js

# Изменение синтаксиса для асинхронных компонентов
новое

# Обзор

Краткий обзор того, что изменилось:

  • Новый вспомогательный метод defineAsyncComponent, который явно определяет асинхронные компоненты
  • Опция component переименована в loader
  • Функция загрузки не принимает аргументы resolve и reject и должна возвращать Promise

Для более подробного объяснения, читайте дальше!

# Введение

Ранее асинхронные компоненты создавались путём определения функции, которая возвращает Promise, например так:

const asyncModal = () => import('./Modal.vue')
1

Или, при использовании продвинутого синтаксиса с опциями:

const asyncModal = {
  component: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
}
1
2
3
4
5
6
7

# Синтаксис в 3.x

Теперь, во Vue 3, так как функциональные компоненты определяются как чистые функции, то объявление асинхронных компонентов необходимо явно оборачивать в новый вспомогательный метод defineAsyncComponent:

import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// Асинхронный компонент без опций
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// Асинхронный компонент с дополнительными опциями
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Примечание

Vue Router поддерживает аналогичный механизм асинхронной загрузки компонентов маршрута, также именуемый ленивой загрузкой. Несмотря на сходство, эта функция отличается от поддержки асинхронных компонентов во Vue. Поэтому не нужно использовать defineAsyncComponent при настройке компонентов маршрута во Vue Router. Подробнее об этом можно прочитать в разделе Lazy Loading Routes (opens new window) документации Vue Router.

Другое изменение заключается в том, что опция component теперь переименована в loader для более точного указания на то, что определение компонента не может предоставляться напрямую.




 






import { defineAsyncComponent } from 'vue'

const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})
1
2
3
4
5
6
7
8
9

Кроме того, в отличие от 2.x, функция загрузчика больше не получает аргументы resolve и reject и должна всегда возвращать Promise.

// Vue 2.x
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}

// Vue 3.x
const asyncComponent = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      /* ... */
    })
)
1
2
3
4
5
6
7
8
9
10
11
12

Подробная информация об использовании асинхронных компонентов:

← Изменено поведение при приведении значения атрибутов →