{"id":37764,"date":"2026-01-14T19:41:03","date_gmt":"2026-01-14T16:41:03","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37764"},"modified":"2026-01-14T19:41:03","modified_gmt":"2026-01-14T16:41:03","slug":"vue-jsde-tembel-yuklenen-lazy-loaded-bir-sihirbaz-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-jsde-tembel-yuklenen-lazy-loaded-bir-sihirbaz-olusturma\/","title":{"rendered":"Vue.js’de Tembel Y\u00fcklenen (Lazy Loaded) Bir Sihirbaz Olu\u015fturma"},"content":{"rendered":"

<\/p>\n

Vue.js’de Tembel Y\u00fcklenen (Lazy Loaded) Bir Sihirbaz Olu\u015fturma<\/h2>\n
Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini (UX) \u00f6n planda tutarak h\u0131zl\u0131, ak\u0131c\u0131 ve duyarl\u0131 olmal\u0131d\u0131r. Bu hedeflere ula\u015fmada kritik rol oynayan stratejilerden biri de tembel y\u00fckleme (lazy loading) prensibidir. \u00d6zellikle \u00e7ok ad\u0131ml\u0131 formlar veya karma\u015f\u0131k i\u015f ak\u0131\u015flar\u0131 i\u00e7eren sihirbaz (wizard) yap\u0131lar\u0131nda, tembel y\u00fckleme hem performans\u0131 art\u0131r\u0131r hem de kullan\u0131c\u0131lar\u0131n uygulaman\u0131zla etkile\u015fimini iyile\u015ftirir. Bu makalede, Vue.js \u00e7er\u00e7evesinde tembel y\u00fcklenen bir sihirbaz\u0131n nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131, temel konseptlerden ba\u015flayarak ad\u0131m ad\u0131m teknik uygulamalar\u0131na kadar detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

Sihirbaz Nedir ve Neden Kullan\u0131l\u0131r?<\/h2>\n

Bir sihirbaz, genellikle karma\u015f\u0131k veya uzun bir g\u00f6revi, y\u00f6netilebilir, mant\u0131ksal ad\u0131mlara b\u00f6len bir kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) desenidir. Her ad\u0131m, kullan\u0131c\u0131n\u0131n belirli bir bilgi par\u00e7as\u0131n\u0131 girmesini veya bir karar\u0131 vermesini gerektirir. Bu yap\u0131, a\u015fa\u011f\u0131daki nedenlerle tercih edilir:<\/p>\n

Kullan\u0131c\u0131 Dostu Deneyim:<\/strong> Karma\u015f\u0131k g\u00f6revleri daha k\u00fc\u00e7\u00fck, sindirilebilir par\u00e7alara ay\u0131rarak kullan\u0131c\u0131lar\u0131n bunalmas\u0131n\u0131 engeller ve odaklanmalar\u0131n\u0131 sa\u011flar.<\/li>\n
Hata Oran\u0131n\u0131 Azaltma:<\/strong> Her ad\u0131mda belirli bir validasyon uygulayarak, hatal\u0131 veri giri\u015fini veya eksik bilgiyi en ba\u015ftan yakalamaya yard\u0131mc\u0131 olur.<\/li>\n
Ad\u0131m Ad\u0131m Rehberlik:<\/strong> Kullan\u0131c\u0131ya bir s\u00fcrecin neresinde oldu\u011funu g\u00f6sterir ve sonraki ad\u0131mlar\u0131 tahmin etmesine yard\u0131mc\u0131 olur.<\/li>\n

Veri Toplama:<\/strong> \u00d6zellikle kay\u0131t, \u00f6deme veya yap\u0131land\u0131rma gibi s\u00fcre\u00e7lerde, gerekli t\u00fcm bilgilerin d\u00fczenli bir \u015fekilde toplanmas\u0131n\u0131 sa\u011flar.<\/li>\n<\/ul>\n
Ancak, geleneksel sihirbaz uygulamalar\u0131nda, sihirbaz\u0131n t\u00fcm ad\u0131mlar\u0131 genellikle ilk y\u00fcklemede birlikte gelir. Bu durum, \u00f6zellikle \u00e7ok say\u0131da ad\u0131m\u0131 olan ve her ad\u0131m\u0131n kendi i\u00e7inde karma\u015f\u0131k bile\u015fenler veya b\u00fcy\u00fck veri gerektiren sihirbazlarda, uygulaman\u0131n ilk y\u00fckleme s\u00fcresini (initial load time) ve bellek kullan\u0131m\u0131n\u0131 olumsuz etkileyebilir. \u0130\u015fte bu noktada tembel y\u00fckleme devreye girer.<\/p>\n
Tembel Y\u00fckleme (Lazy Loading) Nedir ve Faydalar\u0131 Nelerdir?<\/h2>\n
Tembel y\u00fckleme, bir uygulaman\u0131n t\u00fcm kaynaklar\u0131n\u0131 (JavaScript, CSS, g\u00f6rseller vb.) ba\u015flang\u0131\u00e7ta y\u00fcklemek yerine, yaln\u0131zca ihtiya\u00e7 duyuldu\u011funda y\u00fcklemesini sa\u011flayan bir optimizasyon tekni\u011fidir. Bu yakla\u015f\u0131m, modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biridir ve a\u015fa\u011f\u0131daki faydalar\u0131 sunar:<\/p>\n
\n
Daha H\u0131zl\u0131 \u0130lk Y\u00fckleme S\u00fcresi:<\/strong> Kullan\u0131c\u0131lar\u0131n uygulaman\u0131z\u0131n ilk g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve etkile\u015fimini \u00e7ok daha h\u0131zl\u0131 deneyimlemesini sa\u011flar, \u00e7\u00fcnk\u00fc ba\u015flang\u0131\u00e7ta sadece kritik kaynaklar y\u00fcklenir.<\/li>\n
Azalt\u0131lm\u0131\u015f A\u011f Trafi\u011fi:<\/strong> Sunucudan istemciye daha az veri transferi anlam\u0131na gelir, bu da \u00f6zellikle mobil kullan\u0131c\u0131lar veya s\u0131n\u0131rl\u0131 bant geni\u015fli\u011fine sahip kullan\u0131c\u0131lar i\u00e7in \u00f6nemlidir.<\/li>\n
Daha \u0130yi Kaynak Y\u00f6netimi:<\/strong> Uygulaman\u0131n bellek ve CPU kullan\u0131m\u0131n\u0131 optimize eder. Yaln\u0131zca aktif olarak kullan\u0131lan bile\u015fenler bellekte tutulur.<\/li>\n
Geli\u015ftirilmi\u015f Kullan\u0131c\u0131 Deneyimi:<\/strong> Daha h\u0131zl\u0131 y\u00fckleme s\u00fcreleri ve daha ak\u0131c\u0131 bir etkile\u015fim, kullan\u0131c\u0131lar\u0131n uygulaman\u0131zda kalma olas\u0131l\u0131\u011f\u0131n\u0131 art\u0131r\u0131r.<\/li>\n
Daha K\u00fc\u00e7\u00fck Paket Boyutlar\u0131:<\/strong> Kod b\u00f6lme (code splitting) sayesinde, uygulaman\u0131n genel JavaScript paket boyutu k\u00fc\u00e7\u00fcl\u00fcr, bu da taray\u0131c\u0131n\u0131n betikleri ayr\u0131\u015ft\u0131rma ve derleme s\u00fcresini k\u0131salt\u0131r.<\/li>\n<\/ul>\n
Vue.js, bu tembel y\u00fckleme mekanizmalar\u0131n\u0131 son derece kolay bir \u015fekilde entegre etmemizi sa\u011flayan g\u00fc\u00e7l\u00fc \u00f6zelliklere sahiptir.<\/p>\n
Vue.js’de Tembel Y\u00fckleme Mekanizmalar\u0131<\/h2>\n
Vue.js, bile\u015fenleri veya rotalar\u0131 tembel y\u00fcklemek i\u00e7in \u00e7e\u015fitli yerle\u015fik mekanizmalar sunar. Sihirbaz ba\u011flam\u0131nda en s\u0131k kullanaca\u011f\u0131m\u0131z iki y\u00f6ntem \u015funlard\u0131r:<\/p>\n
Vue Router ile Rota Bazl\u0131 Tembel Y\u00fckleme<\/h3>\n
E\u011fer sihirbaz\u0131n\u0131z\u0131n her ad\u0131m\u0131 ayr\u0131 bir URL’ye kar\u015f\u0131l\u0131k geliyorsa, Vue Router’\u0131n tembel y\u00fckleme \u00f6zelli\u011fi olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r. Bu, her bir rota bile\u015feninin yaln\u0131zca ilgili rota ziyaret edildi\u011finde y\u00fcklenmesini sa\u011flar. Bu y\u00f6ntem, bir sihirbaz\u0131n ana yap\u0131s\u0131n\u0131 olu\u015fturmak i\u00e7in kullan\u0131labilir, ancak genellikle sihirbaz\u0131n i\u00e7indeki<\/em> her ad\u0131m\u0131 dinamik olarak y\u00fcklemek i\u00e7in daha esnek bir yakla\u015f\u0131m aran\u0131r.<\/p>\n
\n\/\/ router\/index.js\nimport { createRouter, createWebHistory } from 'vue-router';\n\nconst routes = [\n {\n path: '\/',\n name: 'home',\n component: () => import('..\/views\/HomeView.vue') \/\/ Tembel y\u00fcklendi\n },\n {\n path: '\/wizard\/step1',\n name: 'wizard-step1',\n component: () => import('..\/views\/WizardStep1.vue') \/\/ Tembel y\u00fcklendi\n },\n {\n path: '\/wizard\/step2',\n name: 'wizard-step2',\n component: () => import('..\/views\/WizardStep2.vue') \/\/ Tembel y\u00fcklendi\n },\n \/\/ ... di\u011fer ad\u0131mlar\n];\n\nconst router = createRouter({\n history: createWebHistory(),\n routes\n});\n\nexport default router;\n<\/code><\/pre>\nYukar\u0131daki \u00f6rnekte, component<\/code> \u00f6zelli\u011fine do\u011frudan bir bile\u015fen referans\u0131 yerine, dinamik bir import()<\/code> fonksiyonu at\u0131yoruz. Bu, webpack veya Vite gibi derleyicilere bu bile\u015feni ayr\u0131 bir JavaScript paketine b\u00f6lme talimat\u0131 verir.<\/p>\n defineAsyncComponent<\/code> ile Bile\u015fen Bazl\u0131 Tembel Y\u00fckleme<\/h3>\nSihirbaz\u0131m\u0131z\u0131n ad\u0131mlar\u0131 genellikle ayn\u0131 URL i\u00e7inde, ancak farkl\u0131 bile\u015fenler olarak g\u00f6r\u00fcnt\u00fclenir. \u0130\u015fte bu senaryo i\u00e7in Vue 3’\u00fcn defineAsyncComponent<\/code> API’si m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr. Bu fonksiyon, bir bile\u015feni e\u015fzamans\u0131z olarak y\u00fcklemek i\u00e7in kullan\u0131l\u0131r ve y\u00fckleme durumu, hata durumu gibi ek se\u00e7enekler sunar.<\/p>\n \n\/\/ component\/Wizard.vue i\u00e7inde\nimport { defineAsyncComponent } from 'vue';\n\nconst Step1 = defineAsyncComponent(() => import('.\/WizardSteps\/Step1.vue'));\nconst Step2 = defineAsyncComponent(() => import('.\/WizardSteps\/Step2.vue'));\nconst Step3 = defineAsyncComponent({\n loader: () => import('.\/WizardSteps\/Step3.vue'),\n loadingComponent: import('.\/LoadingSpinner.vue'), \/\/ Y\u00fcklenirken g\u00f6sterilecek bile\u015fen\n errorComponent: import('.\/ErrorDisplay.vue'), \/\/ Hata olu\u015ftu\u011funda g\u00f6sterilecek bile\u015fen\n delay: 200, \/\/ Y\u00fckleme bile\u015fenini g\u00f6stermeden \u00f6nce milisaniye cinsinden gecikme\n timeout: 3000 \/\/ Y\u00fckleme hatas\u0131 olarak kabul edilmeden \u00f6nce milisaniye cinsinden zaman a\u015f\u0131m\u0131\n});\n\n\/\/ ... Vue bile\u015feninizin setup veya data k\u0131sm\u0131nda bu bile\u015fenleri kullanabilirsiniz.\n<\/code><\/pre>\ndefineAsyncComponent<\/code> fonksiyonu, bir fabrika fonksiyonu (factory function) al\u0131r. Bu fonksiyon, bile\u015feni dinamik olarak i\u00e7eri aktaran bir Promise d\u00f6nd\u00fcrmelidir. Bu sayede, Step1<\/code>, Step2<\/code> ve Step3<\/code> bile\u015fenleri yaln\u0131zca ger\u00e7ekten ihtiya\u00e7 duyuldu\u011funda (yani, ana sihirbaz bile\u015feni taraf\u0131ndan render edilmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda) y\u00fcklenir.<\/p>\n Tembel Y\u00fcklenen Bir Sihirbaz Tasar\u0131m\u0131n\u0131n Temel Bile\u015fenleri<\/h2>\nTembel y\u00fcklenen bir sihirbaz olu\u015fturmak i\u00e7in a\u015fa\u011f\u0131daki temel bile\u015fenlere ihtiyac\u0131m\u0131z olacak:<\/p>\n Ana Sihirbaz Bile\u015feni (WizardContainer.vue<\/code>)<\/h3>\nBu bile\u015fen, sihirbaz\u0131n kalbini olu\u015fturur. G\u00f6revleri \u015funlard\u0131r:<\/p>\n \nDurum Y\u00f6netimi:<\/strong> Mevcut ad\u0131m\u0131, sihirbaz\u0131n genel verilerini ve tamamlanan ad\u0131mlar\u0131 y\u00f6netir.<\/li>\n Navigasyon Mant\u0131\u011f\u0131:<\/strong> “\u0130leri” ve “Geri” d\u00fc\u011fmelerinin i\u015flevselli\u011fini sa\u011flar, ad\u0131mlar aras\u0131nda ge\u00e7i\u015fi kontrol eder.<\/li>\n Dinamik Bile\u015fen Render Etme:<\/strong> Mevcut ad\u0131ma g\u00f6re ilgili ad\u0131m bile\u015fenini dinamik olarak y\u00fckler ve render eder.<\/li>\n Veri Ak\u0131\u015f\u0131:<\/strong> Ad\u0131m bile\u015fenlerinden gelen veriyi toplar ve bir sonraki ad\u0131ma iletir.<\/li>\n<\/ul>\nAd\u0131m Bile\u015fenleri (WizardStep1.vue<\/code>, WizardStep2.vue<\/code>, vb.)<\/h3>\nHer bir ad\u0131m, kendi \u00f6zel i\u00e7eri\u011fini (form elemanlar\u0131, metinler, g\u00f6rseller) bar\u0131nd\u0131ran ayr\u0131 bir Vue bile\u015feni olacakt\u0131r. Bu bile\u015fenlerin g\u00f6revleri \u015funlard\u0131r:<\/p>\n \nForm Elemanlar\u0131:<\/strong> Kullan\u0131c\u0131dan bilgi toplamak i\u00e7in gerekli input, select, textarea vb. elemanlar\u0131 i\u00e7erir.<\/li>\n Yerel Durum:<\/strong> Kendi i\u00e7indeki form verilerini y\u00f6netir.<\/li>\n Validasyon:<\/strong> Ad\u0131m\u0131n gerektirdi\u011fi validasyon kurallar\u0131n\u0131 uygular.<\/li>\n Veri Aktar\u0131m\u0131:<\/strong> Toplad\u0131\u011f\u0131 veya g\u00fcncelledi\u011fi veriyi ana sihirbaz bile\u015fenine (genellikle emit<\/code> olaylar\u0131 arac\u0131l\u0131\u011f\u0131yla) geri iletir.<\/li>\n<\/ul>\nNavigasyon Bile\u015feni (WizardNavigation.vue<\/code> – Opsiyonel)<\/h3>\nBu bile\u015fen, sihirbaz\u0131n \u00fcst veya alt k\u0131sm\u0131nda yer alarak kullan\u0131c\u0131n\u0131n ad\u0131mlar aras\u0131nda gezinmesini sa\u011flar. G\u00f6revleri \u015funlard\u0131r:<\/p>\n \nAd\u0131m G\u00f6stergeleri:<\/strong> Kullan\u0131c\u0131ya mevcut ad\u0131m\u0131 ve sihirbaz\u0131n toplam ad\u0131m say\u0131s\u0131n\u0131 g\u00f6sterir (\u00f6rne\u011fin, “Ad\u0131m 3 \/ 5”).<\/li>\n \u0130leri\/Geri D\u00fc\u011fmeleri:<\/strong> Ana sihirbaz bile\u015fenindeki navigasyon metodlar\u0131n\u0131 tetikler.<\/li>\n Durum Bazl\u0131 D\u00fc\u011fme Etkinle\u015ftirme:<\/strong> Ge\u00e7erli ad\u0131m\u0131n validasyon durumuna g\u00f6re “\u0130leri” d\u00fc\u011fmesini etkinle\u015ftirir veya devre d\u0131\u015f\u0131 b\u0131rak\u0131r.<\/li>\n<\/ul>\nUygulama Ad\u0131mlar\u0131: Vue.js’de Tembel Y\u00fcklenen Sihirbaz Olu\u015fturma<\/h2>\n\u015eimdi, yukar\u0131da bahsetti\u011fimiz bile\u015fenleri kullanarak pratik bir uygulama olu\u015ftural\u0131m.<\/p>\n Proje Kurulumu<\/h3>\n\u00d6ncelikle, Vue CLI veya Vite kullanarak yeni bir Vue projesi olu\u015ftural\u0131m:<\/p>\n \nVue CLI ile<\/h2>\nvue create my-lazy-wizard\ncd my-lazy-wizard\n\n Vite ile (daha h\u0131zl\u0131)<\/h2>\nnpm init vue@latest\ncd my-lazy-wizard\nnpm install\n<\/code><\/pre>\n Sihirbaz Veri Modeli ve Durum Y\u00f6netimi<\/h3>\nSihirbaz\u0131m\u0131z, kullan\u0131c\u0131dan \u00e7e\u015fitli bilgiler toplayacak. Bu verileri y\u00f6netmek i\u00e7in merkezi bir duruma ihtiyac\u0131m\u0131z var. K\u00fc\u00e7\u00fck bir sihirbaz i\u00e7in Vue’nun reactive<\/code> veya ref<\/code> API’leri yeterli olabilirken, daha karma\u015f\u0131k senaryolar i\u00e7in Pinia veya Vuex gibi bir durum y\u00f6netimi k\u00fct\u00fcphanesi tercih edilebilir. Bu \u00f6rnekte, reactive<\/code> kullanarak basit bir merkezi durum olu\u015ftural\u0131m.<\/p>\n \n\/\/ src\/stores\/wizardStore.js (Basit bir merkezi durum)\nimport { reactive } from 'vue';\n\nexport const wizardStore = reactive({\n currentStep: 1,\n totalSteps: 3, \/\/ \u00d6rnek i\u00e7in 3 ad\u0131m\n wizardData: {\n personalInfo: {\n name: '',\n email: ''\n },\n addressInfo: {\n street: '',\n city: ''\n },\n paymentInfo: {\n cardNumber: '',\n expiryDate: ''\n }\n },\n \/\/ Ad\u0131m bazl\u0131 validasyon durumlar\u0131\n stepValidity: {\n 1: false,\n 2: false,\n 3: false\n }\n});\n<\/code><\/pre>\nAna Sihirbaz Bile\u015feni (Wizard.vue<\/code>)<\/h3>\nBu bile\u015fen, sihirbaz\u0131m\u0131z\u0131n iskeletini olu\u015fturacak. Ad\u0131m bile\u015fenlerini dinamik olarak y\u00fckleyecek ve aralar\u0131ndaki ge\u00e7i\u015fi y\u00f6netecek.<\/p>\n \n\n

Uygulama Ad\u0131mlar\u0131: Vue.js’de Tembel Y\u00fcklenen Sihirbaz Olu\u015fturma<\/h2>\n
\u015eimdi, yukar\u0131da bahsetti\u011fimiz bile\u015fenleri kullanarak pratik bir uygulama olu\u015ftural\u0131m.<\/p>\n

Vue CLI ile<\/h2>\nvue create my-lazy-wizard\ncd my-lazy-wizard\n\n

Vite ile (daha h\u0131zl\u0131)<\/h2>\nnpm init vue@latest\ncd my-lazy-wizard\nnpm install\n<\/code><\/pre>\n

Ana Sihirbaz Bile\u015feni (`Wizard.vue<\/code>)<\/h3>\nBu bile\u015fen, sihirbaz\u0131m\u0131z\u0131n iskeletini olu\u015fturacak. Ad\u0131m bile\u015fenlerini dinamik olarak y\u00fckleyecek ve aralar\u0131ndaki ge\u00e7i\u015fi y\u00f6netecek.<\/p>\n \n\n`

Sihirbaz - Ad\u0131m {{ wizardStore.currentStep }} \/ {{ wizardStore.totalSteps }}<\/h2>\n
\n \n {{ step }}\n <\/span>\n <\/div>\n\n
\n \n \n <\/div>\n\n
\n