# Komponen Asinkron
new

# Gambaran Umum

Berikut merupakan gambaran umum tentang perubahan yang terjadi:

  • Fungsi bantuan baru bernama defineAsyncComponent yang secara eksplisit menyatakan komponen asinkron
  • Opsi component diubah menjadi loader
  • Fungsi pemuat tidak lagi memiliki argumen resolve dan reject dan harus mengembalikan sebuah Promise

Lanjutkan membaca untuk penjelasan lebih lanjut

# Perkenalan

Sebelumnya, komponen asinkron dibuat dengan menyatakan sebuah komponen sebagai sebuah fungsi yang mengembalikan sebuah Promise, seperti:

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

Atau, dengan sintaks komponen yang lebih rumit yang memiliki opsi:

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

# Sintaks Pada Versi 3.x

Sekarang di Vue versi 3 karena komponen fungsional dinyatakan sebagai fungsi murni, pernyataan komponen asinkron harus dinyatakan secara eksplisit dengan membungkus komponen dengan sebuah fungsi bantuan bernama defineAsyncComponent:

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

// Komponen asingkronus tanpa opsi
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// dengan opsi
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

NOTE

Vue Router supports a similar mechanism for asynchronously loading route components, known as lazy loading. Despite the similarities, this feature is distinct from Vue's support for async components. You should not use defineAsyncComponent when configuring route components with Vue Router. You can read more about this in the Lazy Loading Routes (opens new window) section of the Vue Router documentation.

NOTE

Vue router mendukung cara yang sama untuk menggunakan komponen asynchronously loading route, yang di ketahui sebagai lazy loading. Meskipun hampir sama, fitur ini berbeda dengan Vue komponen async. Kamu seharusnya tidak menggunakan defineAsyncComponent saat mengkonfigurasi komponen router dengan Vue Router. Kamu bisa membaca lebih lanjut tentang Lazy Loading Route (opens new window) disini pada bagian Dokumentasi Vue Router.

Perubahan lain yang terjadi dari Vue versi 2 adalah opsi component yang diubah menjadi loader yang bertujuan untuk menyampaikan bahwa pernyataan komponen tidak dapat disediakan secara langsung.




 






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

Selain itu, tidak sepert pada Vue versi 2, fungsi pemuat tidak lagi memiliki argumen resolve dan reject dan harus selalu mengembalikan sebuah Promise

// Pada Vue versi 2.0
const komponenAsinkronLama = (resolve, reject) => {
  /* ... */
}

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

Anda dapat mempelajari lebih lanjut tentang penggunaan komponen asinknron pada:

Deployed on Netlify.
Pembaruan terakhir: 2021-06-12, 08:35:35 UTC