[{"data":1,"prerenderedAt":496},["ShallowReactive",2],{"post-\u002Ftr\u002Fvue-js-nedir":3},{"page":4,"translation":333,"nav":351,"related":478,"random":483},{"id":5,"title":6,"body":7,"categories":331,"category":333,"date":334,"description":335,"draft":336,"extension":337,"image":338,"kind":333,"lang":73,"meta":339,"navigation":340,"path":341,"readingTime":342,"seo":343,"slug":344,"stem":345,"tags":346,"translationKey":344,"type":332,"updated":349,"__hash__":350},"postsTr\u002Ftr\u002Fvue-js-nedir.md","Vue.js Nedir? Yeni Başlayanlar İçin Rehber",{"type":8,"value":9,"toc":316},"minimark",[10,55,58,61,66,172,174,179,197,200,203,205,209,213,216,220,223,227,230,234,237,241,244,246,250,253,296,303,308],[11,12,13,21],"blockquote",{},[14,15,16,17],"p",{},"💡 ",[18,19,20],"strong",{},"Özet (TL;DR):",[22,23,24,31,37],"ul",{},[25,26,27,30],"li",{},[18,28,29],{},"Vue.js Nedir?:"," Kullanıcı arayüzleri ve tek sayfa uygulamalar (SPA) oluşturmak için kullanılan, öğrenmesi kolay, modüler ve yüksek performanslı bir açık kaynaklı JavaScript framework'üdür.",[25,32,33,36],{},[18,34,35],{},"Öne Çıkan Özellikleri:"," HTML tabanlı şablon yapısı, reaktif veri bağlama (reactivity) ve yeniden kullanılabilir bileşen (component) mimarisi.",[25,38,39,42,43,46,47,50,51,54],{},[18,40,41],{},"Güncel Durum:"," Vue 2 sürümü Aralık 2023 itibarıyla resmi desteğini kaybetmiştir (EOL). Yeni projelerde varsayılan olarak ",[18,44,45],{},"Vue 3",", durum yönetimi için ",[18,48,49],{},"Pinia"," ve geliştirici dostu ",[18,52,53],{},"Composition API"," kullanılmaktadır.",[14,56,57],{},"2017 yılında \"React mi öğrensem Vue mu?\" sorusu ile her iki framework'ü de incelemiş ve sonuç olarak Vue.js'te karar kılmıştım. Bu yazıyı, o günden bugüne büyük bir keyifle kullandığım Vue ekosistemine \"Merhaba\" demek isteyenlere fikir vermek için kaleme alıyorum.",[59,60],"hr",{},[62,63,65],"h3",{"id":64},"popüler-frontend-frameworkleri-karşılaştırması","Popüler Frontend Framework'leri Karşılaştırması",[67,68,69,89],"table",{},[70,71,72],"thead",{},[73,74,75,80,83,86],"tr",{},[76,77,79],"th",{"align":78},"left","Özellik",[76,81,82],{"align":78},"React",[76,84,85],{"align":78},"Vue.js",[76,87,88],{"align":78},"Angular",[90,91,92,109,125,140,156],"tbody",{},[73,93,94,100,103,106],{},[95,96,97],"td",{"align":78},[18,98,99],{},"Geliştirici",[95,101,102],{"align":78},"Meta (Facebook)",[95,104,105],{"align":78},"Evan You & Topluluk",[95,107,108],{"align":78},"Google",[73,110,111,116,119,122],{},[95,112,113],{"align":78},[18,114,115],{},"Öğrenme Eğrisi",[95,117,118],{"align":78},"Orta (JSX ve ekosistem seçimi)",[95,120,121],{"align":78},"Kolay (Standart HTML\u002FCSS\u002FJS)",[95,123,124],{"align":78},"Zor (TypeScript ve yoğun mimari)",[73,126,127,132,135,138],{},[95,128,129],{"align":78},[18,130,131],{},"Şablon Yapısı",[95,133,134],{"align":78},"JSX (JavaScript içinde HTML)",[95,136,137],{"align":78},"HTML tabanlı şablonlar",[95,139,137],{"align":78},[73,141,142,147,150,153],{},[95,143,144],{"align":78},[18,145,146],{},"Durum Yönetimi",[95,148,149],{"align":78},"Redux, Context API, Zustand",[95,151,152],{"align":78},"Pinia (Modern), Vuex (Legacy)",[95,154,155],{"align":78},"NgRx, RxJS",[73,157,158,163,166,169],{},[95,159,160],{"align":78},[18,161,162],{},"Performans",[95,164,165],{"align":78},"Virtual DOM (Hızlı)",[95,167,168],{"align":78},"Virtual DOM \u002F Compiler-informed (Çok Hızlı)",[95,170,171],{"align":78},"Real DOM \u002F Change Detection (Hızlı)",[59,173],{},[175,176,178],"h2",{"id":177},"vuejs-nedir","Vue.js Nedir?",[14,180,181,190,191,196],{},[182,183,85],"a",{"href":184,"rel":185,"target":189},"https:\u002F\u002Fvuejs.org\u002F",[186,187,188],"nofollow","noopener","noreferrer","_blank",", eski bir Google çalışanı olan ",[182,192,195],{"href":193,"rel":194,"target":189},"https:\u002F\u002Fwww.evanyou.me",[186,187,188],"Evan You"," tarafından geliştirilen açık kaynak kodlu bir JavaScript framework'üdür.",[14,198,199],{},"Ağırlıklı olarak tarayıcı tabanlı tek-sayfa uygulamaları (Single Page Application - SPA) için kullanıcı arayüzü geliştirmeye yarayan Vue.js'i, mobil (Capacitor\u002FNativeScript) veya masaüstü (Electron) uygulamalar için de kullanmak mümkündür.",[14,201,202],{},"Modüler yapısı sayesinde ana Vue bileşenini ihtiyacınız olan modül ve eklentilerle genişleterek çok basit bir tek sayfa uygulamayı da, karmaşık çok sayfalı kurumsal sistemleri de Vue ile kolayca kotarabilirsiniz.",[59,204],{},[175,206,208],{"id":207},"vuejsin-güçlü-yönleri-nelerdir","Vue.js'in Güçlü Yönleri Nelerdir?",[62,210,212],{"id":211},"_1-dosya-boyutu-ve-performans","1. Dosya Boyutu ve Performans",[14,214,215],{},"Gzip'li haliyle oldukça küçük boyutlu olan (Vue 3 çekirdeği ~10 KB civarındadır) Vue, modüler yapısı sayesinde kullanmadığınız özellikleri projenize dahil etmenizi otomatik olarak önler. Ağır yükler altında bile sanal DOM (Virtual DOM) optimizasyonları sayesinde son derece hızlı çalışır.",[62,217,219],{"id":218},"_2-öğrenme-kolaylığı","2. Öğrenme Kolaylığı",[14,221,222],{},"Eğer temel düzeyde JavaScript, HTML ve CSS bilginiz varsa, Vue öğrenmeniz çok kısa sürecektir. Şablon sistemi olarak standart HTML kullandığı için React'teki JSX gibi sıfırdan yeni bir sözdizimi öğrenmek zorunda kalmazsınız.",[62,224,226],{"id":225},"_3-güçlü-dokümantasyon","3. Güçlü Dokümantasyon",[14,228,229],{},"Vue ekosisteminin en büyük avantajlarından biri, resmi web sitesindeki dokümantasyonun inanılmaz derecede anlaşılır, öğretici ve güncel olmasıdır. Başka hiçbir harici kaynağa ihtiyaç duymadan sadece resmi kılavuzları takip ederek Vue uzmanı olabilirsiniz.",[62,231,233],{"id":232},"_4-reaktivite-reactivity","4. Reaktivite (Reactivity)",[14,235,236],{},"Vue.js'in reaktif veri bağlama motoru, JavaScript tarafındaki verileriniz (değişkenler, diziler, nesneler) değiştiğinde HTML arayüzünün anında ve otomatik olarak güncellenmesini sağlar. Bu durum sizi manuel DOM manipülasyonu yapma yükünden tamamen kurtarır.",[62,238,240],{"id":239},"_5-bileşen-component-mimarisi","5. Bileşen (Component) Mimarisi",[14,242,243],{},"Vue ile tekrar tekrar kullanabileceğiniz arayüz bileşenleri oluşturmak çok kolaydır. Örneğin, özelleştirdiğiniz bir tasarım elemanını (form girdi alanı, buton veya açılır liste) bir bileşen haline getirip projenin her yerinde tek satırla çağırabilir, tüm bu bileşenlerin birbirleriyle güvenli şekilde etkileşim kurmasını sağlayabilirsiniz.",[59,245],{},[175,247,249],{"id":248},"vue-2-vs-vue-3-ve-güncel-durum","Vue 2 vs. Vue 3 ve Güncel Durum",[14,251,252],{},"Vue 3, Vue 2.x sürümlerine göre performans, paket boyutu ve geliştirici deneyimi açısından devasa iyileştirmelerle gelmiştir.",[22,254,255,265,279],{},[25,256,257,260,261,264],{},[18,258,259],{},"End of Life (EOL) Uyarısı:"," Vue 2, ",[18,262,263],{},"31 Aralık 2023"," tarihi itibarıyla resmi ömrünü tamamlamıştır (EOL). Bu nedenle artık yeni projelerde Vue 2 kullanılması kesinlikle önerilmemekte; yeni başlayanların doğrudan Vue 3 ile başlaması gerekmektedir.",[25,266,267,275,276,278],{},[18,268,269,270,274],{},"Composition API ve ",[271,272,273],"code",{},"\u003Cscript setup>",":"," Vue 3 ile gelen en büyük yeniliklerden biri, React Hooks mantığına benzeyen fakat reaktiviteyi çok daha temiz yöneten ",[18,277,53],{},"'dır. Bu yapı, büyük ölçekli projelerde kodun organize edilmesini son derece kolaylaştırır.",[25,280,281,284,285,288,289,291,292,295],{},[18,282,283],{},"Pinia ve Modern Ekosistem:"," Vue 2 döneminde popüler olan durum yöneticisi ",[18,286,287],{},"Vuex",", yerini Vue 3 ile birlikte resmi olarak çok daha hafif, basit ve TypeScript desteği güçlü olan ",[18,290,49],{},"'ya bırakmıştır. Benzer şekilde router tarafında ",[271,293,294],{},"vue-router","'ın güncel Vue 3 sürümü kullanılmaktadır.",[14,297,298,302],{},[182,299,301],{"href":300},"\u002Ftr\u002Fvue-3-hakkinda-bilmeniz-gerekenler-yenilikler","Vue 3 Hakkında Bilmeniz Gerekenler ve Yenilikler"," başlıklı yazımda Vue 3'ün teknik detaylarını daha ayrıntılı inceleyebilirsiniz. Sorularınız veya yorumlarınızla deneyimlerinizi paylaşmayı unutmayın.",[304,305,307],"h5",{"id":306},"bu-yazıda-yapılan-değişiklikler","Bu Yazıda Yapılan Değişiklikler",[22,309,310,313],{},[25,311,312],{},"21.06.2026: Vue 2'nin 31 Aralık 2023 itibarıyla EOL (End of Life) olduğu bilgisi eklenerek yeni başlayanlara Vue 2 önerme hatası düzeltildi. Durum yöneticisi olarak Vuex yerine modern standart olan Pinia eklendi. Türkçe imla hataları (React'mi -> React mi, bende -> ben de vb.) ve dokümantasyon yazımları düzeltildi. Popüler framework karşılaştırma tablosu ile özet paneli eklendi.",[25,314,315],{},"11.05.2022: Yazı özeti düzenlendi.",{"title":317,"searchDepth":318,"depth":318,"links":319},"",2,[320,322,323,330],{"id":64,"depth":321,"text":65},3,{"id":177,"depth":318,"text":178},{"id":207,"depth":318,"text":208,"children":324},[325,326,327,328,329],{"id":211,"depth":321,"text":212},{"id":218,"depth":321,"text":219},{"id":225,"depth":321,"text":226},{"id":232,"depth":321,"text":233},{"id":239,"depth":321,"text":240},{"id":248,"depth":318,"text":249},[332],"technical",null,"2020-12-08","Vue.js nedir, ne işe yarar? Vue 3 ile gelen yenilikler, Composition API, Pinia durum yönetimi ve diğer frontend kütüphaneleriyle karşılaştırması.",false,"md","\u002Fimages\u002Fhero\u002Fvue-reactive.avif",{},true,"\u002Ftr\u002Fvue-js-nedir",4,{"title":6,"description":335},"vue-js-nedir","tr\u002Fvue-js-nedir",[347,348],"ui","vuejs","2026-06-21","txFPyHLVGjZs8_0TiB_IPkRTGokrSBEoyC22GAbw9lo",{"prev":352,"next":355,"others":358,"lucky":477,"readingTime":342},{"path":353,"title":354},"\u002Ftr\u002Fmerhaba-tailwind-css","Merhaba Tailwind CSS",{"path":356,"title":357},"\u002Ftr\u002Fmerhaba-phalcon-framework","Merhaba Phalcon Framework",[359,362,365,368,371,374,377,380,383,386,389,392,395,398,401,404,407,410,413,416,419,422,425,428,431,434,437,440,443,446,449,452,455,458,461,464,467,468,471,474],{"path":360,"title":361},"\u002Ftr\u002Fes12-nedir-ecmascript-2021-nedir","ES12 Nedir? ECMAScript 2021 Nedir?",{"path":363,"title":364},"\u002Ftr\u002Fvisitor-tasarim-deseni-nedir","Visitor Tasarım Deseni Nedir?",{"path":366,"title":367},"\u002Ftr\u002Fstate-tasarim-deseni-nedir","State Tasarım Deseni Nedir?",{"path":369,"title":370},"\u002Ftr\u002Fyeni-tema-honeywind","Yeni WordPress Temam Honeywind: Tailwind CSS ve Minimalizm",{"path":372,"title":373},"\u002Ftr\u002Fes16-nedir-ecmascript-2025-nedir","ES16 nedir? ECMAScript 2025 nedir?",{"path":375,"title":376},"\u002Ftr\u002Fgo-veri-tipleri-string-integer-float-complex-boolean-ve-array","Go Veri Tipleri - String, Integer, Float, Complex, Boolean ve Array",{"path":378,"title":379},"\u002Ftr\u002Fphp-ve-makine-ogrenimi-php-ml-kutuphanesi","PHP ve Makine Öğrenimi: PHP-ML Kütüphanesi ile Pratik Çözümler",{"path":381,"title":382},"\u002Ftr\u002Ffacade-tasarim-deseni-nedir","Facade Tasarım Deseni Nedir?",{"path":384,"title":385},"\u002Ftr\u002Fdocker-ile-litespeed-enterprise-kurulumu","Docker ile LiteSpeed Enterprise Kurulumu",{"path":387,"title":388},"\u002Ftr\u002Fes9-nedir-ecmascript-2018-nedir","ES9 Nedir? ECMAScript 2018 Nedir?",{"path":390,"title":391},"\u002Ftr\u002Fearly-return-erken-donus-nedir","Early Return \u002F Erken Dönüş nedir?",{"path":393,"title":394},"\u002Ftr\u002Fgo-veri-tipleri-map","Go Veri Tipleri - Map",{"path":396,"title":397},"\u002Ftr\u002Frest-api-guvenligi-nasil-saglanir","REST Api Güvenliği Nasıl Sağlanır?",{"path":399,"title":400},"\u002Ftr\u002Fekran-filtresi-mavi-isik-filtresi-flux","Gözlere dost, mavi ışığa düşman ekran filtresi f.lux",{"path":402,"title":403},"\u002Ftr\u002Fes8-nedir-ecmascript-2017-nedir","ES8 Nedir? ECMAScript 2017 Nedir?",{"path":405,"title":406},"\u002Ftr\u002Fmerhaba-gluster","Merhaba Gluster: Dağıtık Dosya Sistemi Nedir?",{"path":408,"title":409},"\u002Ftr\u002Fphp-generator-ve-iterator-farki","PHP'de Generator ve Iterator Arasındaki Temel Farklar",{"path":411,"title":412},"\u002Ftr\u002Fjwt-guvenli-mi-guvenlik-acigi-olusturmayin","JWT Güvenli Derken Güvenlik Açığı Oluşturmayın",{"path":414,"title":415},"\u002Ftr\u002Ffull-stack-proje-gelistiriyoruz","Full Stack Proje Geliştiriyoruz",{"path":417,"title":418},"\u002Ftr\u002Ftemplate-method-tasarim-deseni-nedir","Template Method Tasarım Deseni Nedir?",{"path":420,"title":421},"\u002Ftr\u002Flinuxda-golang-kurulumu","Linux'ta Golang Kurulumu",{"path":423,"title":424},"\u002Ftr\u002Frest-api-dokumantasyonu-nasil-yapilir","REST Api Dokümantasyonu Nasıl Oluşturulur?",{"path":426,"title":427},"\u002Ftr\u002Fheadless-wordpress-hakkinda-her-sey","Headless WordPress Hakkında Her Şey",{"path":429,"title":430},"\u002Ftr\u002Fopenlitespeed-ve-litespeed-enterprisei-reverse-proxy-olarak-kullanmak","OpenLiteSpeed ve LiteSpeed Enterprise Sunucularını Reverse Proxy Olarak Kullanmak",{"path":432,"title":433},"\u002Ftr\u002Fphalcon-frameworkun-gelecegi","Phalcon Framework'ün Geleceği: Bir Devrin Sonu",{"path":435,"title":436},"\u002Ftr\u002Ftailwind-css-nerede-kullanilir-tailwind-css-nerede-kullanilmaz","Tailwind CSS Nerede Kullanılır? Tailwind CSS Nerede Kullanılmaz?",{"path":438,"title":439},"\u002Ftr\u002Fwindows-10-golang-kurulumu","Windows 10 ve 11'de Golang Kurulumu ve GOPATH Yapılandırması",{"path":441,"title":442},"\u002Ftr\u002Fnext-js-on-bellegi-nasil-yenilenir-on-demand-cache-regeneration","Next.js Önbelleği Nasıl Yenilenir? \"On-Demand Cache Regeneration\"",{"path":444,"title":445},"\u002Ftr\u002Fmemento-tasarim-deseni-nedir","Memento Tasarım Deseni Nedir?",{"path":447,"title":448},"\u002Ftr\u002Ffactory-method-ve-abstract-factory-farki-nedir","Factory Method ve Abstract Factory Farkı Nedir?",{"path":450,"title":451},"\u002Ftr\u002Fes10-nedir-ecmascript-2019-nedir","ES10 Nedir? ECMAScript 2019 Nedir?",{"path":453,"title":454},"\u002Ftr\u002Fdocker-ile-mariadb-kurulumu","Docker ile MariaDB Kurulumu",{"path":456,"title":457},"\u002Ftr\u002Fgo-veri-tipleri-struct","Go Veri Tipleri: Struct",{"path":459,"title":460},"\u002Ftr\u002Fjavascriptde-moduller","JavaScript'te Modüller",{"path":462,"title":463},"\u002Ftr\u002Fubuntu-20-04-uzerinde-cyberpanel-kurulumu","Ubuntu 20.04 üzerinde CyberPanel kurulumu",{"path":465,"title":466},"\u002Ftr\u002Fgo-ile-websockets-websocket-upgrader-nedir","Go ile WebSockets: Upgrader Nedir?",{"path":356,"title":357},{"path":469,"title":470},"\u002Ftr\u002Fsingleton-tasarim-deseni-nedir","Singleton Tasarım Deseni Nedir?",{"path":472,"title":473},"\u002Ftr\u002Fdocker-nedir","Docker Nedir?",{"path":475,"title":476},"\u002Ftr\u002Fdocker-ile-rabbitmq-kurulumu","Docker ile RabbitMQ Kurulumu",{"path":360,"title":361},[479,481],{"path":300,"title":301,"date":480},"2021-07-24",{"path":414,"title":415,"date":482},"2021-02-16",[484,488,492],{"path":485,"title":486,"date":487},"\u002Ftr\u002Fadapter-tasarim-deseni-nedir","Adapter Tasarım Deseni Nedir?","2021-08-21",{"path":489,"title":490,"date":491},"\u002Ftr\u002Frest-api-hata-yonetimi","REST Api Hata Yönetimi","2021-02-15",{"path":493,"title":494,"date":495},"\u002Ftr\u002Fcommand-tasarim-deseni-nedir","Command Tasarım Deseni Nedir?","2021-10-01",1782142078732]