Blog

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.js'de asenkron bileşenler, import ifadesiyle kullanılabilir ve bu bileşenlerin yüklenmesi gerektiği anda dinamik olarak alınabilir. İşte bir örnek:

    

        

            javascript
        
        

            
                // AsyncComponent.vue
                 const  AsyncComponent = () => 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:

    

        

            javascript
        
        

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

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: