# 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 menjadiloader
- Fungsi pemuat tidak lagi memiliki argumen
resolve
danreject
dan harus mengembalikan sebuahPromise
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')
Atau, dengan sintaks komponen yang lebih rumit yang memiliki opsi:
const asyncModal = {
component: () => import('./Modal.vue'),
delay: 200,
timeout: 3000,
error: ErrorComponent,
loading: LoadingComponent
}
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
})
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
})
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) => {
/* ... */
})
)
2
3
4
5
6
7
8
9
10
11
12
Anda dapat mempelajari lebih lanjut tentang penggunaan komponen asinknron pada: