비동기 컴포넌트란?

• 큰 어플리케이션에서는 앱을 작은 단위로 나눠 필요한 컴포넌트만 서버에서 구성해야 한다.
• vue는 컴포넌트 정의를 비동기 처리 할 수 있도록 팩토리 함수를 사용한다.
  *팩토리 함수 - 파라미터로 객체를 변경하게 반환할 수 있는 팩토리를 정의한다.

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // resolve callback 에 컴포넌트 정의를 넘겨줍니다
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

팩토리 함수는 서버로부터 컴포넌트 처리할 때 실행할 resolve callback을 받는다. 로드를 실패할 경우는 reject로 처리될 수 있다.

defineAsyncComponent

vue3의 함수형 컴포넌트는 순수 함수로 정의되어 있으므로 비동기 컴포넌트 정의는 defineAsyncComponent 함수를 사용한다.

import { defineAsyncComponent } from 'vue'

const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  error: ErrorComponent,
  loading: LoadingComponent
})

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

// 3.x 버전
const asyncComponent = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      /* ... */
    })
)

component 옵션명을 loader로 변경하고 Loader함수는 resolve 및 reject의 인수를 받지 않고 promise를 반환한다.