Async Component Nedir?

Vue.js'de "async component" terimi, bir Vue bileşeninin asenkron olarak yüklenmesi anlamına gelir. Bu, uygulama başladığında veya sayfa yüklendiğinde bir bileşenin hemen yüklenmesi gerekmeyen durumlarda kullanılır. Özellikle büyük uygulamalarda veya sayfalarında performansı artırmak için kullanışlıdır.

Vue 3'te asenkron bileşenler defineAsyncComponent fonksiyonu ve dinamik import() ifadesiyle tanımlanır ve bu bileşenlerin yüklenmesi gerektiği anda dinamik olarak alınabilir. İşte bir örnek:

// AsyncComponent.js
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'));

export default AsyncComponent;

Yukarıdaki örnekte, AsyncComponent adlı bir asenkron bileşen oluşturulmuştur. import ifadesi içindeki ./MyComponent.vue dosyası, yüklenmesi gereken bileşeni temsil eder. Bu dosya, kullanıcı sayfayı açtığında veya belirli bir olay gerçekleştiğinde yüklenecektir.

Bu asenkron bileşeni kullanmak için, genellikle Vue.js içindeki bir bileşen içinde şu şekilde kullanabilirsiniz:

// App.vue
<template>
  <div>
    <AsyncComponent />
  </div>
</template>

<script>
import AsyncComponent from './AsyncComponent.vue';
export default {
  components: {
    AsyncComponent,
  },
};
</script>

Burada AsyncComponent, normal bir bileşen gibi components seçeneğine kaydedilir. Vue, bileşen ekranda ilk kez gösterileceği zaman MyComponent.vue dosyasını ayrı bir parça (chunk) olarak indirir; böylece sayfanın ilk yüklemesi küçülür.

Not: Vue 2'de bir bileşeni () => import(...) fonksiyonu olarak vermek yeterliydi. Vue 3'te bileşenler için defineAsyncComponent kullanılmalıdır; düz () => import(...) yalnızca Vue Router rota tanımlarında geçerlidir. defineAsyncComponent, yükleme sırasında ve hata durumunda gösterilecek bileşenleri (loadingComponent, errorComponent) de tanımlamanıza olanak tanır.