{"id":34550,"date":"2025-11-18T18:41:37","date_gmt":"2025-11-18T15:41:37","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=34550"},"modified":"2025-11-18T18:41:37","modified_gmt":"2025-11-18T15:41:37","slug":"vue-js-asenkron-bilesenlere-giris","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-asenkron-bilesenlere-giris\/","title":{"rendered":"Vue.js Asenkron Bile\u015fenlere Giri\u015f"},"content":{"rendered":"

<\/p>\n

Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini (UX) iyile\u015ftirmek ve ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcrelerini optimize etmek i\u00e7in genellikle kod b\u00f6lme (code splitting) ve tembel y\u00fckleme (lazy loading) tekniklerini kullan\u0131r. Vue.js, bu ihtiyac\u0131 kar\u015f\u0131lamak \u00fczere asenkron bile\u015fenler (async components) ad\u0131 verilen g\u00fc\u00e7l\u00fc bir \u00f6zellik sunar. Bu bile\u015fenler, yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda y\u00fcklenir, bu da uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 paket boyutunu k\u00fc\u00e7\u00fclt\u00fcr ve genel performans\u0131n\u0131 art\u0131r\u0131r.<\/p>\n

Ancak, asenkron y\u00fckleme i\u015flemi s\u0131ras\u0131nda kullan\u0131c\u0131ya geri bildirim sa\u011flamak hayati \u00f6neme sahiptir. Kullan\u0131c\u0131lar, bir bile\u015fenin y\u00fcklendi\u011fini veya bir hata olu\u015ftu\u011funu bilmek ister. Bu rehberde, Vue.js asenkron bile\u015fenlerini kullanarak y\u00fckleme ve hata durumlar\u0131n\u0131 nas\u0131l etkin bir \u015fekilde y\u00f6netece\u011finizi, pratik kod \u00f6rnekleri ve en iyi uygulamalarla ele alaca\u011f\u0131z.<\/p>\n

Vue.js Asenkron Bile\u015fenlere Giri\u015f<\/h2>\n
Asenkron bile\u015fenler, bir bile\u015feni dinamik olarak i\u00e7eri aktarman\u0131za olanak tan\u0131r. Vue 3’te bu i\u015flem, `defineAsyncComponent<\/code> yard\u0131mc\u0131 fonksiyonu arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r. Bu fonksiyon, bir factory fonksiyonu al\u0131r ve bu fonksiyon, bile\u015feni d\u00f6nd\u00fcren bir Promise d\u00f6nd\u00fcrmelidir.<\/p>\n`

Neden Asenkron Bile\u015fenler Kullanmal\u0131y\u0131z?<\/h3>\n\nPerformans \u0130yile\u015ftirme:<\/strong> Uygulaman\u0131z\u0131n ba\u015flang\u0131\u00e7 y\u00fckleme s\u00fcresini ve paket boyutunu azalt\u0131r.<\/li>\n
Kaynak Verimlili\u011fi:<\/strong> Bellek ve CPU kaynaklar\u0131n\u0131 yaln\u0131zca ihtiya\u00e7 duyulan bile\u015fenler i\u00e7in kullan\u0131r.<\/li>\n
Daha \u0130yi Kullan\u0131c\u0131 Deneyimi:<\/strong> B\u00fcy\u00fck uygulamalarda kullan\u0131c\u0131lar\u0131n daha h\u0131zl\u0131 etkile\u015fime ge\u00e7mesini sa\u011flar.<\/li>\n<\/ul>\nTemel Asenkron Bile\u015fen Tan\u0131mlamas\u0131<\/h3>\nEn basit haliyle, bir asenkron bile\u015feni \u015fu \u015fekilde tan\u0131mlayabilirsiniz:<\/p>\n
\n\/\/ src\/components\/MyAsyncComponent.vue\n\/\/ Bu bile\u015fen sadece ihtiya\u00e7 duyuldu\u011funda y\u00fcklenecek\n\n\/\/ Uygulaman\u0131z\u0131n ana dosyas\u0131nda veya bir bile\u015fen i\u00e7inde\nimport { defineAsyncComponent } from 'vue';\n\nconst MyAsyncComponent = defineAsyncComponent(() =>\n  import('.\/MyAsyncComponent.vue')\n);\n\nexport default {\n  components: {\n    MyAsyncComponent,\n  },\n  template: \n    \n      Ana Bile\u015fen<\/h3>\n      \n    <\/div>\n  <\/code>,\n};\n<\/code><\/pre>\nBu kod, MyAsyncComponent.vue<\/code> dosyas\u0131n\u0131 yaln\u0131zca MyAsyncComponent<\/code> ilk kez render edildi\u011finde y\u00fckleyecektir. Ancak, bu temel kurulumda y\u00fckleme s\u00fcreci veya olas\u0131 hatalar hakk\u0131nda herhangi bir geri bildirim yoktur.<\/p>\n
Y\u00fckleme Durumu Y\u00f6netimi<\/h2>\nBir asenkron bile\u015fen y\u00fcklenirken kullan\u0131c\u0131ya bir g\u00f6sterge sunmak, uygulaman\u0131z\u0131n duyarl\u0131 oldu\u011funu hissettirir. defineAsyncComponent<\/code> fonksiyonu, y\u00fckleme durumunu y\u00f6netmek i\u00e7in bir dizi se\u00e7enek sunar.<\/p>\n
Y\u00fckleme Bile\u015feni Tan\u0131mlama<\/h3>\nloadingComponent<\/code> se\u00e7ene\u011fini kullanarak, asenkron bile\u015fen y\u00fcklenirken g\u00f6sterilecek ba\u015fka bir bile\u015fen belirleyebilirsiniz.<\/p>\n
\n\/\/ src\/components\/LoadingSpinner.vue\n