[{"data":1,"prerenderedAt":1424},["ShallowReactive",2],{"post-\u002Ftr\u002Fvue-3-hakkinda-bilmeniz-gerekenler-yenilikler":3},{"page":4,"translation":1265,"nav":1280,"related":1409,"random":1415},{"id":5,"title":6,"body":7,"categories":1263,"category":1265,"date":1266,"description":1267,"draft":1268,"extension":1269,"image":1270,"kind":1265,"lang":1075,"meta":1271,"navigation":605,"path":1272,"readingTime":218,"seo":1273,"slug":1274,"stem":1275,"tags":1276,"translationKey":1265,"type":1264,"updated":1278,"__hash__":1279},"postsTr\u002Ftr\u002Fvue-3-hakkinda-bilmeniz-gerekenler-yenilikler.md","Vue 3 Hakkında Bilmeniz Gerekenler ve Yenilikler",{"type":8,"value":9,"toc":1235},"minimark",[10,14,25,80,83,88,91,96,99,103,116,118,122,125,129,143,240,244,251,398,402,405,522,524,528,532,543,700,799,803,817,819,823,826,832,847,853,1030,1034,1052,1056,1062,1064,1068,1172,1174,1178,1182,1188,1192,1195,1204,1213,1215,1220,1231],[11,12,13],"p",{},"Vue 3, ilk yayınlandığı günden bu yana modern frontend dünyasında kendine çok güçlü bir yer edindi. İlk başlarda geliştirici araçlarının (Vue Devtools) ve ekosistemin yeni sürüme tam uyum sağlaması biraz zaman alsa da, günümüzde Vue 3 olgunlaşmış ve modern web geliştirmenin en kararlı standartlarından biri haline gelmiştir.",[15,16,17],"blockquote",{},[11,18,19,20,24],{},"⚠️ ",[21,22,23],"strong",{},"Önemli Not:"," Vue 2 sürümü, 31 Aralık 2023 itibarıyla resmi desteğinin sonuna (End-of-Life) gelmiştir. Bu nedenle yeni projelerde veya mevcut altyapılarda Vue 3'e geçiş artık isteğe bağlı değil, güvenlik ve kararlılık açısından zorunlu bir hal almıştır.",[15,26,27,33],{},[11,28,29,30],{},"💡 ",[21,31,32],{},"Özet (TL;DR):",[34,35,36,43,70],"ul",{},[37,38,39,42],"li",{},[21,40,41],{},"Amaç:"," Vue 3'ün getirdiği radikal mimari yenilikleri, yeni bileşen türlerini ve modern yazım standartlarını kavramak.",[37,44,45,48,49,53,54,57,58,61,62,65,66,69],{},[21,46,47],{},"Kilit Yenilikler:"," Composition API, ",[50,51,52],"code",{},"\u003Cscript setup>"," syntax'ı, ",[50,55,56],{},"Teleport",", ",[50,59,60],{},"Fragments"," (Çoklu kök eleman), ",[50,63,64],{},"Vite"," yapılandırması ve ",[50,67,68],{},"Pinia"," durum yönetimi.",[37,71,72,75,76],{},[21,73,74],{},"Motto:"," ",[77,78,79],"em",{},"Modern frontend development with TypeScript support and lightning-fast reactivity.",[81,82],"hr",{},[84,85,87],"h2",{"id":86},"_1-vue-3-ile-gelen-mimari-değişiklikler","1. Vue 3 ile Gelen Mimari Değişiklikler",[11,89,90],{},"Vue 3, dışarıdan bakıldığında Vue 2 şablonlarına benzese de, arka plandaki motoru tamamen TypeScript ile sıfırdan yazılmıştır. Bu da olağanüstü bir performans artışı ve geliştirici konforu sağlamıştır.",[92,93,95],"h3",{"id":94},"yenilenen-render-motoru","Yenilenen Render Motoru",[11,97,98],{},"Vue 3 çekirdeği ile bütünleşik olarak sıfırdan yazılan render motoru, yeni bir şablon derleyicisi (template compiler) içeriyor. Bu derleyici, statik kod analizi yaparak değişmeyen DOM düğümlerini tespit eder (Static Hoisting) ve reaktif güncellemeler sırasında bu düğümleri atlayarak sanal DOM (Virtual DOM) performansını maksimuma çıkarır.",[92,100,102],{"id":101},"açık-apiler-exposed-apis","Açık API'ler (Exposed APIs)",[11,104,105,106,57,109,57,112,115],{},"Artık Vue'nun reaktivite sistemi (",[50,107,108],{},"reactive",[50,110,111],{},"ref",[50,113,114],{},"computed"," vb.) framework bağımsız hale geldi. Yani Vue uygulaması render etmeden bile, sadece reaktivite kütüphanesini çekerek vanilla JavaScript projelerinizde veya farklı kütüphaneler (örn: React) içinde reaktif durum yönetimini kullanabilirsiniz.",[81,117],{},[84,119,121],{"id":120},"_2-yeni-yerleşik-bileşenler-built-in-components","2. Yeni Yerleşik Bileşenler (Built-in Components)",[11,123,124],{},"Vue 2'de harici kütüphanelerle çözmeye çalıştığımız veya DOM yapısını bozan bazı sınırlar Vue 3 ile yerleşik bileşenlerle standartlaştırıldı.",[92,126,128],{"id":127},"parçalar-fragments","Parçalar (Fragments)",[11,130,131,132,135,136,139,140,142],{},"Vue 2'de her bileşenin ",[50,133,134],{},"\u003Ctemplate>"," bloğu içinde tek bir ana sarmalayıcı (genellikle bir ",[50,137,138],{},"\u003Cdiv>",") elemanı bulunması şarttı. Vue 3 ile gelen ",[21,141,60],{}," desteği sayesinde, artık bileşenlerinizin kök seviyesinde dilediğiniz kadar eleman barındırabilirsiniz. Bu durum DOM ağacında gereksiz sarmalayıcı eleman birikmesini önler.",[144,145,150],"pre",{"className":146,"code":147,"language":148,"meta":149,"style":149},"language-html shiki shiki-themes github-light github-dark","\u003C!-- Vue 3.x Layout.vue (Gereksiz sarmalayıcı div yok) -->\n\u003Ctemplate>\n  \u003Cheader>...\u003C\u002Fheader>\n  \u003Cmain v-bind=\"$attrs\">...\u003C\u002Fmain>\n  \u003Cfooter>...\u003C\u002Ffooter>\n\u003C\u002Ftemplate>\n","html","",[50,151,152,161,175,191,216,230],{"__ignoreMap":149},[153,154,157],"span",{"class":155,"line":156},"line",1,[153,158,160],{"class":159},"sJ8bj","\u003C!-- Vue 3.x Layout.vue (Gereksiz sarmalayıcı div yok) -->\n",[153,162,164,168,172],{"class":155,"line":163},2,[153,165,167],{"class":166},"sVt8B","\u003C",[153,169,171],{"class":170},"s9eBZ","template",[153,173,174],{"class":166},">\n",[153,176,178,181,184,187,189],{"class":155,"line":177},3,[153,179,180],{"class":166},"  \u003C",[153,182,183],{"class":170},"header",[153,185,186],{"class":166},">...\u003C\u002F",[153,188,183],{"class":170},[153,190,174],{"class":166},[153,192,194,196,199,203,206,210,212,214],{"class":155,"line":193},4,[153,195,180],{"class":166},[153,197,198],{"class":170},"main",[153,200,202],{"class":201},"sScJk"," v-bind",[153,204,205],{"class":166},"=",[153,207,209],{"class":208},"sZZnC","\"$attrs\"",[153,211,186],{"class":166},[153,213,198],{"class":170},[153,215,174],{"class":166},[153,217,219,221,224,226,228],{"class":155,"line":218},5,[153,220,180],{"class":166},[153,222,223],{"class":170},"footer",[153,225,186],{"class":166},[153,227,223],{"class":170},[153,229,174],{"class":166},[153,231,233,236,238],{"class":155,"line":232},6,[153,234,235],{"class":166},"\u003C\u002F",[153,237,171],{"class":170},[153,239,174],{"class":166},[92,241,243],{"id":242},"işınlanma-teleport","Işınlanma (Teleport)",[11,245,246,247,250],{},"Bir elemanı mantıksal olarak tanımlandığı bileşenin dışına, örneğin doğrudan ",[50,248,249],{},"\u003Cbody>"," etiketinin altına render etmek istediğimizde kullanılır. Modal pencereleri, bildirim kutuları (toast) ve tooltip tasarımları için harika bir çözümdür.",[144,252,254],{"className":146,"code":253,"language":148,"meta":149,"style":149},"\u003Ctemplate>\n  \u003Cbutton @click=\"open = true\">Modali Aç\u003C\u002Fbutton>\n  \n  \u003CTeleport to=\"body\">\n    \u003Cdiv v-if=\"open\" class=\"modal\">\n      \u003Cp>Bu modal doğrudan body altına render edildi!\u003C\u002Fp>\n      \u003Cbutton @click=\"open = false\">Kapat\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  \u003C\u002FTeleport>\n\u003C\u002Ftemplate>\n",[50,255,256,264,286,291,308,334,348,369,379,389],{"__ignoreMap":149},[153,257,258,260,262],{"class":155,"line":156},[153,259,167],{"class":166},[153,261,171],{"class":170},[153,263,174],{"class":166},[153,265,266,268,271,274,276,279,282,284],{"class":155,"line":163},[153,267,180],{"class":166},[153,269,270],{"class":170},"button",[153,272,273],{"class":201}," @click",[153,275,205],{"class":166},[153,277,278],{"class":208},"\"open = true\"",[153,280,281],{"class":166},">Modali Aç\u003C\u002F",[153,283,270],{"class":170},[153,285,174],{"class":166},[153,287,288],{"class":155,"line":177},[153,289,290],{"class":166},"  \n",[153,292,293,295,298,301,303,306],{"class":155,"line":193},[153,294,180],{"class":166},[153,296,56],{"class":297},"s7hpK",[153,299,300],{"class":201}," to",[153,302,205],{"class":166},[153,304,305],{"class":208},"\"body\"",[153,307,174],{"class":166},[153,309,310,313,316,319,321,324,327,329,332],{"class":155,"line":218},[153,311,312],{"class":166},"    \u003C",[153,314,315],{"class":170},"div",[153,317,318],{"class":201}," v-if",[153,320,205],{"class":166},[153,322,323],{"class":208},"\"open\"",[153,325,326],{"class":201}," class",[153,328,205],{"class":166},[153,330,331],{"class":208},"\"modal\"",[153,333,174],{"class":166},[153,335,336,339,341,344,346],{"class":155,"line":232},[153,337,338],{"class":166},"      \u003C",[153,340,11],{"class":170},[153,342,343],{"class":166},">Bu modal doğrudan body altına render edildi!\u003C\u002F",[153,345,11],{"class":170},[153,347,174],{"class":166},[153,349,351,353,355,357,359,362,365,367],{"class":155,"line":350},7,[153,352,338],{"class":166},[153,354,270],{"class":170},[153,356,273],{"class":201},[153,358,205],{"class":166},[153,360,361],{"class":208},"\"open = false\"",[153,363,364],{"class":166},">Kapat\u003C\u002F",[153,366,270],{"class":170},[153,368,174],{"class":166},[153,370,372,375,377],{"class":155,"line":371},8,[153,373,374],{"class":166},"    \u003C\u002F",[153,376,315],{"class":170},[153,378,174],{"class":166},[153,380,382,385,387],{"class":155,"line":381},9,[153,383,384],{"class":166},"  \u003C\u002F",[153,386,56],{"class":297},[153,388,174],{"class":166},[153,390,392,394,396],{"class":155,"line":391},10,[153,393,235],{"class":166},[153,395,171],{"class":170},[153,397,174],{"class":166},[92,399,401],{"id":400},"askıya-alma-suspense","Askıya Alma (Suspense)",[11,403,404],{},"Bileşen ilk defa yüklenirken veya asenkron veri tabanı \u002F API istekleri tamamlanırken kullanıcıya bir yükleniyor (loader) veya fallback arayüzü göstermeyi kolaylaştıran özel bir sarmalayıcıdır.",[144,406,408],{"className":146,"code":407,"language":148,"meta":149,"style":149},"\u003Ctemplate>\n  \u003CSuspense>\n    \u003C!-- Asenkron veri çeken ana bileşen -->\n    \u003Ctemplate #default>\n      \u003CAsyncUserDashboard \u002F>\n    \u003C\u002Ftemplate>\n    \n    \u003C!-- Yüklenme esnasında gösterilecek şablon -->\n    \u003Ctemplate #fallback>\n      \u003Cdiv>Yükleniyor...\u003C\u002Fdiv>\n    \u003C\u002Ftemplate>\n  \u003C\u002FSuspense>\n\u003C\u002Ftemplate>\n",[50,409,410,418,427,432,443,453,461,466,471,482,495,504,513],{"__ignoreMap":149},[153,411,412,414,416],{"class":155,"line":156},[153,413,167],{"class":166},[153,415,171],{"class":170},[153,417,174],{"class":166},[153,419,420,422,425],{"class":155,"line":163},[153,421,180],{"class":166},[153,423,424],{"class":297},"Suspense",[153,426,174],{"class":166},[153,428,429],{"class":155,"line":177},[153,430,431],{"class":159},"    \u003C!-- Asenkron veri çeken ana bileşen -->\n",[153,433,434,436,438,441],{"class":155,"line":193},[153,435,312],{"class":166},[153,437,171],{"class":170},[153,439,440],{"class":201}," #default",[153,442,174],{"class":166},[153,444,445,447,450],{"class":155,"line":218},[153,446,338],{"class":166},[153,448,449],{"class":297},"AsyncUserDashboard",[153,451,452],{"class":166}," \u002F>\n",[153,454,455,457,459],{"class":155,"line":232},[153,456,374],{"class":166},[153,458,171],{"class":170},[153,460,174],{"class":166},[153,462,463],{"class":155,"line":350},[153,464,465],{"class":166},"    \n",[153,467,468],{"class":155,"line":371},[153,469,470],{"class":159},"    \u003C!-- Yüklenme esnasında gösterilecek şablon -->\n",[153,472,473,475,477,480],{"class":155,"line":381},[153,474,312],{"class":166},[153,476,171],{"class":170},[153,478,479],{"class":201}," #fallback",[153,481,174],{"class":166},[153,483,484,486,488,491,493],{"class":155,"line":391},[153,485,338],{"class":166},[153,487,315],{"class":170},[153,489,490],{"class":166},">Yükleniyor...\u003C\u002F",[153,492,315],{"class":170},[153,494,174],{"class":166},[153,496,498,500,502],{"class":155,"line":497},11,[153,499,374],{"class":166},[153,501,171],{"class":170},[153,503,174],{"class":166},[153,505,507,509,511],{"class":155,"line":506},12,[153,508,384],{"class":166},[153,510,424],{"class":297},[153,512,174],{"class":166},[153,514,516,518,520],{"class":155,"line":515},13,[153,517,235],{"class":166},[153,519,171],{"class":170},[153,521,174],{"class":166},[81,523],{},[84,525,527],{"id":526},"_3-api-ve-yazım-değişiklikleri","3. API ve Yazım Değişiklikleri",[92,529,531],{"id":530},"uygulama-başlatma-ve-mount-değişikliği","Uygulama Başlatma ve Mount Değişikliği",[11,533,534,535,538,539,542],{},"Vue 2'de küresel eklentiler, router veya store tanımları doğrudan ana ",[50,536,537],{},"Vue"," sınıfı üzerinden yapılıyor ve bu durum birden fazla Vue uygulamasının aynı sayfada çalıştırılmasını zorlaştırıyordu. Vue 3 ile birlikte her uygulama kendi ",[50,540,541],{},"createApp"," örneğini kullanır.",[144,544,548],{"className":545,"code":546,"language":547,"meta":149,"style":149},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Vue 2.x Uygulama Başlatma\nimport Vue from 'vue';\nimport Vuex from 'vuex';\nimport App from '.\u002FApp.vue';\n\nVue.use(Vuex);\nconst store = new Vuex.Store({});\n\nnew Vue({\n  store,\n  render: h => h(App),\n}).$mount('#app');\n","javascript",[50,549,550,555,573,587,601,607,618,642,646,657,662,683],{"__ignoreMap":149},[153,551,552],{"class":155,"line":156},[153,553,554],{"class":159},"\u002F\u002F Vue 2.x Uygulama Başlatma\n",[153,556,557,561,564,567,570],{"class":155,"line":163},[153,558,560],{"class":559},"szBVR","import",[153,562,563],{"class":166}," Vue ",[153,565,566],{"class":559},"from",[153,568,569],{"class":208}," 'vue'",[153,571,572],{"class":166},";\n",[153,574,575,577,580,582,585],{"class":155,"line":177},[153,576,560],{"class":559},[153,578,579],{"class":166}," Vuex ",[153,581,566],{"class":559},[153,583,584],{"class":208}," 'vuex'",[153,586,572],{"class":166},[153,588,589,591,594,596,599],{"class":155,"line":193},[153,590,560],{"class":559},[153,592,593],{"class":166}," App ",[153,595,566],{"class":559},[153,597,598],{"class":208}," '.\u002FApp.vue'",[153,600,572],{"class":166},[153,602,603],{"class":155,"line":218},[153,604,606],{"emptyLinePlaceholder":605},true,"\n",[153,608,609,612,615],{"class":155,"line":232},[153,610,611],{"class":166},"Vue.",[153,613,614],{"class":201},"use",[153,616,617],{"class":166},"(Vuex);\n",[153,619,620,623,627,630,633,636,639],{"class":155,"line":350},[153,621,622],{"class":559},"const",[153,624,626],{"class":625},"sj4cs"," store",[153,628,629],{"class":559}," =",[153,631,632],{"class":559}," new",[153,634,635],{"class":166}," Vuex.",[153,637,638],{"class":201},"Store",[153,640,641],{"class":166},"({});\n",[153,643,644],{"class":155,"line":371},[153,645,606],{"emptyLinePlaceholder":605},[153,647,648,651,654],{"class":155,"line":381},[153,649,650],{"class":559},"new",[153,652,653],{"class":201}," Vue",[153,655,656],{"class":166},"({\n",[153,658,659],{"class":155,"line":391},[153,660,661],{"class":166},"  store,\n",[153,663,664,667,670,674,677,680],{"class":155,"line":497},[153,665,666],{"class":201},"  render",[153,668,669],{"class":166},": ",[153,671,673],{"class":672},"s4XuR","h",[153,675,676],{"class":559}," =>",[153,678,679],{"class":201}," h",[153,681,682],{"class":166},"(App),\n",[153,684,685,688,691,694,697],{"class":155,"line":506},[153,686,687],{"class":166},"}).",[153,689,690],{"class":201},"$mount",[153,692,693],{"class":166},"(",[153,695,696],{"class":208},"'#app'",[153,698,699],{"class":166},");\n",[144,701,703],{"className":545,"code":702,"language":547,"meta":149,"style":149},"\u002F\u002F Vue 3.x Uygulama Başlatma\nimport { createApp } from 'vue';\nimport { createStore } from 'vuex';\nimport App from '.\u002FApp.vue';\n\nconst store = createStore({});\n\ncreateApp(App)\n  .use(store)\n  .mount('#app');\n",[50,704,705,710,723,736,748,752,765,769,776,786],{"__ignoreMap":149},[153,706,707],{"class":155,"line":156},[153,708,709],{"class":159},"\u002F\u002F Vue 3.x Uygulama Başlatma\n",[153,711,712,714,717,719,721],{"class":155,"line":163},[153,713,560],{"class":559},[153,715,716],{"class":166}," { createApp } ",[153,718,566],{"class":559},[153,720,569],{"class":208},[153,722,572],{"class":166},[153,724,725,727,730,732,734],{"class":155,"line":177},[153,726,560],{"class":559},[153,728,729],{"class":166}," { createStore } ",[153,731,566],{"class":559},[153,733,584],{"class":208},[153,735,572],{"class":166},[153,737,738,740,742,744,746],{"class":155,"line":193},[153,739,560],{"class":559},[153,741,593],{"class":166},[153,743,566],{"class":559},[153,745,598],{"class":208},[153,747,572],{"class":166},[153,749,750],{"class":155,"line":218},[153,751,606],{"emptyLinePlaceholder":605},[153,753,754,756,758,760,763],{"class":155,"line":232},[153,755,622],{"class":559},[153,757,626],{"class":625},[153,759,629],{"class":559},[153,761,762],{"class":201}," createStore",[153,764,641],{"class":166},[153,766,767],{"class":155,"line":350},[153,768,606],{"emptyLinePlaceholder":605},[153,770,771,773],{"class":155,"line":371},[153,772,541],{"class":201},[153,774,775],{"class":166},"(App)\n",[153,777,778,781,783],{"class":155,"line":381},[153,779,780],{"class":166},"  .",[153,782,614],{"class":201},[153,784,785],{"class":166},"(store)\n",[153,787,788,790,793,795,797],{"class":155,"line":391},[153,789,780],{"class":166},[153,791,792],{"class":201},"mount",[153,794,693],{"class":166},[153,796,696],{"class":208},[153,798,699],{"class":166},[92,800,802],{"id":801},"filtrelerin-filters-kaldırılması","Filtrelerin (Filters) Kaldırılması",[11,804,805,806,809,810,813,814,816],{},"Vue 2'de sıklıkla kullanılan ",[50,807,808],{},"{{ price | formatCurrency }}"," şeklindeki boru hattı (pipe) filtreleri Vue 3 ile birlikte performansı olumsuz etkilediği için kaldırılmıştır. Bunun yerine artık standart metotlar (",[50,811,812],{},"methods",") veya hesaplanmış özellikler (",[50,815,114],{},") kullanılması önerilir.",[81,818],{},[84,820,822],{"id":821},"_4-modern-vue-3-standartları","4. Modern Vue 3 Standartları",[11,824,825],{},"Günümüz Vue 3 ekosisteminde kod yazım ve proje yönetim standartları şu şekilde evrilmiştir:",[92,827,829,830],{"id":828},"composition-api-ve-script-setup","Composition API ve ",[50,831,52],{},[11,833,834,835,57,838,57,840,842,843,846],{},"Vue 3, geleneksel Options API'ın (",[50,836,837],{},"data",[50,839,812],{},[50,841,114],{}," blokları) yerine, kodları mantıksal gruplara göre ayırıp tekrar kullanılabilir (composables) kılmayı sağlayan ",[21,844,845],{},"Composition API","'ı getirdi.",[11,848,849,850,852],{},"Daha sonra tanıtılan ",[50,851,52],{}," sözdizimi ise bu yapıyı çok daha temiz ve az boilerplate kod ile yazmamıza imkan tanıyor. Artık modern Vue projelerinde varsayılan standart budur:",[144,854,856],{"className":146,"code":855,"language":148,"meta":149,"style":149},"\u003C!-- Modern Vue 3 Component (\u003Cscript setup>) -->\n\u003Cscript setup>\nimport { ref, onMounted } from 'vue'\n\nconst count = ref(0)\n\nfunction increment() {\n  count.value++\n}\n\nonMounted(() => {\n  console.log('Bileşen yüklendi!')\n})\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"increment\">Sayaç: {{ count }}\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[50,857,858,863,875,887,891,911,915,926,934,939,943,957,972,977,986,991,1000,1021],{"__ignoreMap":149},[153,859,860],{"class":155,"line":156},[153,861,862],{"class":159},"\u003C!-- Modern Vue 3 Component (\u003Cscript setup>) -->\n",[153,864,865,867,870,873],{"class":155,"line":163},[153,866,167],{"class":166},[153,868,869],{"class":170},"script",[153,871,872],{"class":201}," setup",[153,874,174],{"class":166},[153,876,877,879,882,884],{"class":155,"line":177},[153,878,560],{"class":559},[153,880,881],{"class":166}," { ref, onMounted } ",[153,883,566],{"class":559},[153,885,886],{"class":208}," 'vue'\n",[153,888,889],{"class":155,"line":193},[153,890,606],{"emptyLinePlaceholder":605},[153,892,893,895,898,900,903,905,908],{"class":155,"line":218},[153,894,622],{"class":559},[153,896,897],{"class":625}," count",[153,899,629],{"class":559},[153,901,902],{"class":201}," ref",[153,904,693],{"class":166},[153,906,907],{"class":625},"0",[153,909,910],{"class":166},")\n",[153,912,913],{"class":155,"line":232},[153,914,606],{"emptyLinePlaceholder":605},[153,916,917,920,923],{"class":155,"line":350},[153,918,919],{"class":559},"function",[153,921,922],{"class":201}," increment",[153,924,925],{"class":166},"() {\n",[153,927,928,931],{"class":155,"line":371},[153,929,930],{"class":166},"  count.value",[153,932,933],{"class":559},"++\n",[153,935,936],{"class":155,"line":381},[153,937,938],{"class":166},"}\n",[153,940,941],{"class":155,"line":391},[153,942,606],{"emptyLinePlaceholder":605},[153,944,945,948,951,954],{"class":155,"line":497},[153,946,947],{"class":201},"onMounted",[153,949,950],{"class":166},"(() ",[153,952,953],{"class":559},"=>",[153,955,956],{"class":166}," {\n",[153,958,959,962,965,967,970],{"class":155,"line":506},[153,960,961],{"class":166},"  console.",[153,963,964],{"class":201},"log",[153,966,693],{"class":166},[153,968,969],{"class":208},"'Bileşen yüklendi!'",[153,971,910],{"class":166},[153,973,974],{"class":155,"line":515},[153,975,976],{"class":166},"})\n",[153,978,980,982,984],{"class":155,"line":979},14,[153,981,235],{"class":166},[153,983,869],{"class":170},[153,985,174],{"class":166},[153,987,989],{"class":155,"line":988},15,[153,990,606],{"emptyLinePlaceholder":605},[153,992,994,996,998],{"class":155,"line":993},16,[153,995,167],{"class":166},[153,997,171],{"class":170},[153,999,174],{"class":166},[153,1001,1003,1005,1007,1009,1011,1014,1017,1019],{"class":155,"line":1002},17,[153,1004,180],{"class":166},[153,1006,270],{"class":170},[153,1008,273],{"class":201},[153,1010,205],{"class":166},[153,1012,1013],{"class":208},"\"increment\"",[153,1015,1016],{"class":166},">Sayaç: {{ count }}\u003C\u002F",[153,1018,270],{"class":170},[153,1020,174],{"class":166},[153,1022,1024,1026,1028],{"class":155,"line":1023},18,[153,1025,235],{"class":166},[153,1027,171],{"class":170},[153,1029,174],{"class":166},[92,1031,1033],{"id":1032},"pinia-durum-yönetimi","Pinia Durum Yönetimi",[11,1035,1036,1037,1040,1041,1043,1044,1047,1048,1051],{},"Vue 3 ile birlikte resmi state yönetim kütüphanesi ",[21,1038,1039],{},"Vuex","'ten ",[21,1042,68],{},"'ya geçiş yapılmıştır. Pinia, çok daha hafiftir, TypeScript tip desteğine tam uyumludur, karmaşık ",[50,1045,1046],{},"mutations"," kavramını barındırmaz ve doğrudan ",[50,1049,1050],{},"actions"," üzerinden state güncellemelerine izin verir.",[92,1053,1055],{"id":1054},"vite-yapı-aracı","Vite Yapı Aracı",[11,1057,1058,1059,1061],{},"Vue CLI (Webpack tabanlı) yerini tamamen ",[21,1060,64],{}," derleme motoruna bırakmıştır. Vite, tarayıcı tabanlı ES modüllerini (ESM) kullanarak geliştirme aşamasında saniyeler içinde ayağa kalkan, son derece hızlı bir derleme deneyimi sunar.",[81,1063],{},[84,1065,1067],{"id":1066},"seçenekler-karşılaştırma-matrisi","Seçenekler Karşılaştırma Matrisi",[1069,1070,1071,1093],"table",{},[1072,1073,1074],"thead",{},[1075,1076,1077,1082,1085,1088],"tr",{},[1078,1079,1081],"th",{"align":1080},"left","Kriter",[1078,1083,1084],{"align":1080},"Options API (Vue 2\u002F3)",[1078,1086,1087],{"align":1080},"Composition API (Vue 3)",[1078,1089,1090,1092],{"align":1080},[50,1091,52],{}," (Modern Vue 3)",[1094,1095,1096,1116,1140,1156],"tbody",{},[1075,1097,1098,1104,1111,1114],{},[1099,1100,1101],"td",{"align":1080},[21,1102,1103],{},"Kod Düzeni",[1099,1105,1106,57,1108,1110],{"align":1080},[50,1107,837],{},[50,1109,812],{}," blokları",[1099,1112,1113],{"align":1080},"Mantıksal gruplama",[1099,1115,1113],{"align":1080},[1075,1117,1118,1123,1126,1137],{},[1099,1119,1120],{"align":1080},[21,1121,1122],{},"Boilerplate Kod",[1099,1124,1125],{"align":1080},"Orta düzeyde",[1099,1127,1128,1129,1132,1133,1136],{"align":1080},"Yüksek (",[50,1130,1131],{},"setup"," ve ",[50,1134,1135],{},"return"," gerekir)",[1099,1138,1139],{"align":1080},"Çok Düşük (En sade yazım)",[1075,1141,1142,1147,1150,1153],{},[1099,1143,1144],{"align":1080},[21,1145,1146],{},"TypeScript Desteği",[1099,1148,1149],{"align":1080},"Zayıf \u002F Zorlama",[1099,1151,1152],{"align":1080},"Çok İyi",[1099,1154,1155],{"align":1080},"Mükemmel (Native)",[1075,1157,1158,1163,1166,1169],{},[1099,1159,1160],{"align":1080},[21,1161,1162],{},"Bileşen Boyutu",[1099,1164,1165],{"align":1080},"Küçük \u002F Orta projeler için uygun",[1099,1167,1168],{"align":1080},"Büyük \u002F Karmaşık yapılar için uygun",[1099,1170,1171],{"align":1080},"Tüm projelerde önerilen standart",[81,1173],{},[84,1175,1177],{"id":1176},"sıkça-sorulan-sorular-faq","Sıkça Sorulan Sorular (FAQ)",[92,1179,1181],{"id":1180},"neden-vuex-yerine-pinia-kullanmalıyım","Neden Vuex yerine Pinia kullanmalıyım?",[11,1183,1184,1185,1187],{},"Pinia, Vuex'e kıyasla oldukça basitleştirilmiş bir API sunar. ",[50,1186,1046],{}," katmanı olmadığı için kod yazım hamallığını azaltır. Ayrıca TypeScript ile entegre edildiğinde otomatik tip tanımlamalarını eksiksiz olarak sunarak geliştirme hatalarını en aza indirir.",[92,1189,1191],{"id":1190},"vue-2-projemizi-vue-3e-geçirmek-zorunlu-mu","Vue 2 projemizi Vue 3'e geçirmek zorunlu mu?",[11,1193,1194],{},"Evet, teknik olarak zorunludur. Vue 2 artık güvenlik güncellemeleri almıyor. Modern web kütüphaneleri ve NPM paketleri de artık sadece Vue 3'ü destekleyecek şekilde güncellenmektedir. Projenizin sürdürülebilirliği için geçiş planı yapmanız önerilir.",[92,1196,1198,1200,1201,1203],{"id":1197},"script-setup-kullanırken-reactive-nesneleri-return-etmeli-miyim",[50,1199,52],{}," kullanırken reactive nesneleri ",[50,1202,1135],{}," etmeli miyim?",[11,1205,1206,1207,1209,1210,1212],{},"Hayır. ",[50,1208,52],{}," bloğu içinde tanımlanan tüm değişkenler, fonksiyonlar ve import edilen diğer bileşenler şablon (template) katmanında doğrudan kullanılabilir durumdadır. Ekstra bir ",[50,1211,1135],{}," objesi oluşturmanıza gerek kalmaz.",[81,1214],{},[1216,1217,1219],"h5",{"id":1218},"bu-yazıda-yapılan-değişiklikler","Bu Yazıda Yapılan Değişiklikler",[34,1221,1222,1228],{},[37,1223,1224,1225,1227],{},"20.06.2026: Yazı tamamen modernize edildi. Vue 2 EOL (End of Life) bilgilendirme notu eklendi. Mükerrer başlıklar temizlendi, yarım kalan cümleler tamamlandı ve kod hataları düzeltildi. Güncel Vue 3 standartları olan ",[50,1226,52],{},", Vite derleme aracı ve Pinia state yönetimi yazılı olarak ve kod örnekleriyle eklendi.",[37,1229,1230],{},"11.05.2022: Yazı özeti düzenlendi.",[1232,1233,1234],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":149,"searchDepth":163,"depth":163,"links":1236},[1237,1241,1246,1250,1256,1257],{"id":86,"depth":163,"text":87,"children":1238},[1239,1240],{"id":94,"depth":177,"text":95},{"id":101,"depth":177,"text":102},{"id":120,"depth":163,"text":121,"children":1242},[1243,1244,1245],{"id":127,"depth":177,"text":128},{"id":242,"depth":177,"text":243},{"id":400,"depth":177,"text":401},{"id":526,"depth":163,"text":527,"children":1247},[1248,1249],{"id":530,"depth":177,"text":531},{"id":801,"depth":177,"text":802},{"id":821,"depth":163,"text":822,"children":1251},[1252,1254,1255],{"id":828,"depth":177,"text":1253},"Composition API ve \u003Cscript setup>",{"id":1032,"depth":177,"text":1033},{"id":1054,"depth":177,"text":1055},{"id":1066,"depth":163,"text":1067},{"id":1176,"depth":163,"text":1177,"children":1258},[1259,1260,1261],{"id":1180,"depth":177,"text":1181},{"id":1190,"depth":177,"text":1191},{"id":1197,"depth":177,"text":1262},"\u003Cscript setup> kullanırken reactive nesneleri return etmeli miyim?",[1264],"technical",null,"2021-07-24","Vue 3 ile gelen Composition API, \u003Cscript setup>, Pinia, Vite derleme aracı ve yerleşik bileşenleri (Teleport, Suspense) öğrenin.",false,"md","\u002Fimages\u002Fhero\u002Fvue-3.avif",{},"\u002Ftr\u002Fvue-3-hakkinda-bilmeniz-gerekenler-yenilikler",{"title":6,"description":1267},"vue-3-hakkinda-bilmeniz-gerekenler-yenilikler","tr\u002Fvue-3-hakkinda-bilmeniz-gerekenler-yenilikler",[547,1277],"vuejs","2026-06-20","9hsgxozqCtdM3urvhPLdu9JC89D-0ADGFbGFUzTjwnA",{"prev":1281,"next":1284,"others":1287,"lucky":1408,"readingTime":218},{"path":1282,"title":1283},"\u002Ftr\u002Ftasarim-kaliplari-design-patterns-factory-method-nedir","Factory Method Tasarım Deseni Nedir?",{"path":1285,"title":1286},"\u002Ftr\u002Fprogralama-ipucu-yoda-gosterimi","Yoda Koşulları (Yoda Conditions) Nedir? Programlama İpucu",[1288,1291,1294,1297,1300,1303,1306,1309,1312,1315,1318,1321,1324,1327,1330,1333,1336,1339,1342,1345,1348,1351,1354,1357,1360,1363,1366,1369,1372,1375,1378,1381,1384,1387,1390,1393,1396,1399,1402,1405],{"path":1289,"title":1290},"\u002Ftr\u002Frest-api-uri-yapisi-nasil-olmali","REST API URI Yapısı Nasıl Olmalı?",{"path":1292,"title":1293},"\u002Ftr\u002Ftricolor-garbage-collection-algoritmasi-nedir","Tricolor Garbage Collection Algoritması Nedir?",{"path":1295,"title":1296},"\u002Ftr\u002Fheadless-wordpress-hakkinda-her-sey","Headless WordPress Hakkında Her Şey",{"path":1298,"title":1299},"\u002Ftr\u002Fgo-veri-tipleri-struct","Go Veri Tipleri: Struct",{"path":1301,"title":1302},"\u002Ftr\u002Fvite-nedir","Vite Nedir? Modern Web Geliştirme ve Paketleme Aracı",{"path":1304,"title":1305},"\u002Ftr\u002Fstrategy-tasarim-deseni-nedir","Strategy Tasarım Deseni Nedir?",{"path":1307,"title":1308},"\u002Ftr\u002Fwsl-2-kurulumu-6-kolay-adim","WSL 2 Kurulumu - 6 kolay adım",{"path":1310,"title":1311},"\u002Ftr\u002Fes12-nedir-ecmascript-2021-nedir","ES12 Nedir? ECMAScript 2021 Nedir?",{"path":1313,"title":1314},"\u002Ftr\u002Fgarbage-collection-ve-golang","Garbage Collection ve Go (Golang)",{"path":1316,"title":1317},"\u002Ftr\u002Ffacade-tasarim-deseni-nedir","Facade Tasarım Deseni Nedir?",{"path":1319,"title":1320},"\u002Ftr\u002Fubuntu-guncellemesi-sonrasi-cyberpanele-ulasilamama-sorunlarini-giderme","Ubuntu Güncellemesi Sonrası CyberPanel'e Ulaşılamama Sorunlarını Giderme",{"path":1322,"title":1323},"\u002Ftr\u002Flinuxda-golang-kurulumu","Linux'ta Golang Kurulumu",{"path":1325,"title":1326},"\u002Ftr\u002Fflyweight-tasarim-deseni-nedir","Flyweight Tasarım Deseni Nedir?",{"path":1328,"title":1329},"\u002Ftr\u002Fes10-nedir-ecmascript-2019-nedir","ES10 Nedir? ECMAScript 2019 Nedir?",{"path":1331,"title":1332},"\u002Ftr\u002Fnext-js-on-bellegi-nasil-yenilenir-on-demand-cache-regeneration","Next.js Önbelleği Nasıl Yenilenir? \"On-Demand Cache Regeneration\"",{"path":1334,"title":1335},"\u002Ftr\u002Fes7-nedir-ecmascript-2016-nedir","ES7 Nedir? ECMAScript 2016 Nedir?",{"path":1337,"title":1338},"\u002Ftr\u002Fmemento-tasarim-deseni-nedir","Memento Tasarım Deseni Nedir?",{"path":1340,"title":1341},"\u002Ftr\u002Fobserver-tasarim-deseni-nedir","Observer Tasarım Deseni Nedir?",{"path":1343,"title":1344},"\u002Ftr\u002Fwordpress-yonetici-sifresini-wp-cli-kullanarak-sifirlama","WordPress Yönetici Şifresini WP-CLI Kullanarak Sıfırlama",{"path":1346,"title":1347},"\u002Ftr\u002Fes16-nedir-ecmascript-2025-nedir","ES16 nedir? ECMAScript 2025 nedir?",{"path":1349,"title":1350},"\u002Ftr\u002Fes17-nedir-ecmascript-2026-nedir","ES17 nedir? ECMAScript 2026 nedir?",{"path":1352,"title":1353},"\u002Ftr\u002Fes13-nedir-ecmascript-2022-nedir","ES13 nedir? ECMAScript 2022 nedir?",{"path":1355,"title":1356},"\u002Ftr\u002Fes14-nedir-ecmascript-2023-nedir","ES14 nedir? ECMAScript 2023 nedir?",{"path":1358,"title":1359},"\u002Ftr\u002Fphp-generator-ve-iterator-farki","PHP'de Generator ve Iterator Arasındaki Temel Farklar",{"path":1361,"title":1362},"\u002Ftr\u002Fubuntu-24-04-uzerinde-cyberpanel-kurulumu","Ubuntu 24.04 LTS ve 22.04 LTS Üzerinde CyberPanel Kurulumu",{"path":1364,"title":1365},"\u002Ftr\u002Fes15-nedir-ecmascript-2024-nedir","ES15 nedir? ECMAScript 2024 nedir?",{"path":1367,"title":1368},"\u002Ftr\u002Fcomposite-tasarim-deseni-nedir","Composite Tasarım Deseni Nedir?",{"path":1370,"title":1371},"\u002Ftr\u002Fes5-nedir","ES5 Nedir? JavaScript Geliştiricileri İçin Kılavuz",{"path":1373,"title":1374},"\u002Ftr\u002Fgo-veri-tipleri-string-integer-float-complex-boolean-ve-array","Go Veri Tipleri - String, Integer, Float, Complex, Boolean ve Array",{"path":1376,"title":1377},"\u002Ftr\u002Fgo-programlama-dilinin-ozellikleri","Go Programlama Dilinin Özellikleri",{"path":1379,"title":1380},"\u002Ftr\u002Fgo-veri-tipleri-map","Go Veri Tipleri - Map",{"path":1382,"title":1383},"\u002Ftr\u002Fphp-ve-makine-ogrenimi-php-ml-kutuphanesi","PHP ve Makine Öğrenimi: PHP-ML Kütüphanesi ile Pratik Çözümler",{"path":1385,"title":1386},"\u002Ftr\u002Fes6-nedir-ecmascript-2015-nedir","ES6 Nedir? ECMAScript 2015 Nedir?",{"path":1388,"title":1389},"\u002Ftr\u002Fwindows-10-golang-kurulumu","Windows 10 ve 11'de Golang Kurulumu ve GOPATH Yapılandırması",{"path":1391,"title":1392},"\u002Ftr\u002Fmediator-tasarim-deseni-nedir","Mediator Tasarım Deseni Nedir?",{"path":1394,"title":1395},"\u002Ftr\u002Fprototype-tasarim-deseni-nedir","Prototype Tasarım Deseni Nedir?",{"path":1397,"title":1398},"\u002Ftr\u002Fyeni-tema-honeywind","Yeni WordPress Temam Honeywind: Tailwind CSS ve Minimalizm",{"path":1400,"title":1401},"\u002Ftr\u002Fdocker-ile-mariadb-kurulumu","Docker ile MariaDB Kurulumu",{"path":1403,"title":1404},"\u002Ftr\u002Fphalcon-frameworkun-gelecegi","Phalcon Framework'ün Geleceği: Bir Devrin Sonu",{"path":1406,"title":1407},"\u002Ftr\u002Faws-ec2-uzerinde-docker-ve-full-stack-web-performansi","AWS EC2 Üzerinde Docker ve Full Stack Web Performansı",{"path":1304,"title":1305},[1410,1412,1413,1414],{"path":1301,"title":1302,"date":1411},"2026-06-21",{"path":1352,"title":1353,"date":1278},{"path":1355,"title":1356,"date":1278},{"path":1364,"title":1365,"date":1278},[1416,1418,1422],{"path":1328,"title":1329,"date":1417},"2021-10-19",{"path":1419,"title":1420,"date":1421},"\u002Ftr\u002Fgoda-iota-nedir-iota-ne-zaman-ve-nerede-kullanilir","Go'da iota Nedir? iota Ne Zaman ve Nerede Kullanılır?","2021-10-04",{"path":1340,"title":1341,"date":1423},"2021-10-05",1782142105751]