Modern web uygulamalar\u0131, kullan\u0131c\u0131 etkile\u015fimine an\u0131nda yan\u0131t verebilen, dinamik ve ak\u0131c\u0131 deneyimler sunmay\u0131 hedefler. Ancak bu dinamizmi sa\u011flamak, genellikle karma\u015f\u0131k kod yap\u0131lar\u0131 ve tekrar eden (boilerplate) kodlarla doludur. Peki, web geli\u015ftiricilerin bu zorluklar\u0131n \u00fcstesinden gelerek daha h\u0131zl\u0131, daha temiz ve daha keyifli bir \u015fekilde reaktif uygulamalar geli\u015ftirmesi m\u00fcmk\u00fcn m\u00fc? \u0130\u015fte bu noktada Vue.js, sade yap\u0131s\u0131 ve g\u00fc\u00e7l\u00fc reaktivite mekanizmas\u0131yla \u00f6ne \u00e7\u0131karak geli\u015ftiricilere adeta sihirli bir \u00e7\u00f6z\u00fcm sunuyor.<\/p>\n
Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 olarak benimsenebilir (progressively adoptable) bir JavaScript \u00e7at\u0131s\u0131 (framework) olarak bilinir. Temel amac\u0131, web geli\u015ftirme s\u00fcrecini basitle\u015ftirmek ve \u00f6zellikle \u00f6n y\u00fcz (frontend) geli\u015ftiricilerin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 yayg\u0131n sorunlara zarif \u00e7\u00f6z\u00fcmler sunmakt\u0131r. Bu makalede, Vue.js’in reaktivite kavram\u0131n\u0131 nas\u0131l ele ald\u0131\u011f\u0131n\u0131, minimal boilerplate ile nas\u0131l etkileyici uygulamalar geli\u015ftirebilece\u011finizi ve bu s\u00fcrecin arkas\u0131ndaki temel mekanizmalar\u0131 derinlemesine inceleyece\u011fiz. \u0130ster yeni ba\u015flayan bir geli\u015ftirici olun ister deneyimli bir profesyonel, Vue.js’in sundu\u011fu kolayl\u0131k ve g\u00fc\u00e7 sizi \u015fa\u015f\u0131rtacak.<\/p>\n
Vue.js, basitli\u011fi ve esnekli\u011fi sayesinde k\u0131sa s\u00fcrede pop\u00fclerlik kazanm\u0131\u015f bir JavaScript \u00e7at\u0131s\u0131d\u0131r. Di\u011fer modern \u00e7at\u0131lar gibi bile\u015fen tabanl\u0131 (component-based) bir mimariye sahiptir ve geli\u015ftiricilerin b\u00fcy\u00fck uygulamalar\u0131 y\u00f6netilebilir, yeniden kullan\u0131labilir par\u00e7alara ay\u0131rmas\u0131na olanak tan\u0131r. Ancak Vue’yu ger\u00e7ekten ay\u0131ran \u015fey, veri de\u011fi\u015fikliklerine an\u0131nda tepki veren reaktif veri ba\u011flama (data binding) sistemidir. Bir Vue uygulamas\u0131nda verileriniz de\u011fi\u015fti\u011finde, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) otomatik olarak g\u00fcncellenir; bu da manuel DOM (Belge Nesne Modeli) manip\u00fclasyonuna olan ihtiyac\u0131 ortadan kald\u0131r\u0131r ve geli\u015ftiricilerin i\u015fini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde kolayla\u015ft\u0131r\u0131r.<\/p>\n
Vue.js’in temelinde, model-view-viewmodel (MVVM) mimarisi yatar. Bu mimaride:<\/p>\n
Vue.js ile bir uygulama ba\u015flatmak olduk\u00e7a basittir. Genellikle bir HTML dosyas\u0131nda bir kapsay\u0131c\u0131 (container) element tan\u0131mlar ve ard\u0131ndan bu elemente bir Vue uygulamas\u0131 ba\u011flars\u0131n\u0131z. \u0130\u015fte temel bir \u00f6rnek:<\/p>\n
Bu \u00f6rnekte, Vue.js’in en etkileyici \u00f6zelliklerinden biri, veri de\u011fi\u015fikliklerini otomatik olarak alg\u0131lamas\u0131 ve aray\u00fcz\u00fc buna g\u00f6re g\u00fcncellemesidir. Bu “reaktivite” kavram\u0131, \u00e7o\u011fu geli\u015ftiricinin Vue’ya a\u015f\u0131k olmas\u0131n\u0131n ana nedenidir. Peki, bu sihir perde arkas\u0131nda nas\u0131l i\u015fler? Vue 3 ile birlikte reaktivite sistemi, JavaScript’in yeni Proxy API’sini kullanarak daha g\u00fc\u00e7l\u00fc ve verimli hale getirilmi\u015ftir. Vue 2’de getter\/setter (al\u0131c\u0131\/ayarlay\u0131c\u0131) mekanizmas\u0131 kullan\u0131l\u0131rken, Proxy API sayesinde nesnelere yeni \u00f6zellikler eklenmesi veya \u00f6zelliklerin silinmesi gibi durumlar da reaktif olarak izlenebilir hale gelmi\u015ftir.<\/p>\n Bir Vue bile\u015fenindeki Reaktiviteyi daha da g\u00fc\u00e7lendiren ve karma\u015f\u0131k senaryolar\u0131 y\u00f6netmenizi sa\u011flayan iki \u00f6nemli Vue \u00f6zelli\u011fi vard\u0131r: Hesaplanm\u0131\u015f \u00d6zellikler (Computed Properties) ve \u0130zleyiciler (Watchers).<\/p>\n Computed \u00f6zellikler, mevcut reaktif verilere dayanarak yeni bir de\u011fer \u00fcreten fonksiyonlard\u0131r. En \u00f6nemli avantajlar\u0131, ba\u011f\u0131ml\u0131l\u0131klar\u0131 (dependencies) reaktif olarak takip etmeleridir. Yani, bir computed \u00f6zelli\u011fin de\u011feri, yaln\u0131zca ba\u011f\u0131ml\u0131 oldu\u011fu reaktif veriler de\u011fi\u015fti\u011finde yeniden hesaplan\u0131r. Bu, hem performans\u0131 art\u0131r\u0131r hem de \u015fablonunuzda (template) karma\u015f\u0131k mant\u0131\u011f\u0131 temiz bir \u015fekilde tutman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, bir al\u0131\u015fveri\u015f sepetindeki \u00fcr\u00fcnlerin toplam fiyat\u0131n\u0131 hesaplamak i\u00e7in kullan\u0131labilir.<\/p>\n Yukar\u0131daki \u00f6rnekte, Watchers, belirli bir reaktif veri de\u011fi\u015fti\u011finde belirli bir yan etki (side effect) ger\u00e7ekle\u015ftirmek istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n arama terimi de\u011fi\u015fti\u011finde sunucuya bir API iste\u011fi g\u00f6ndermek veya bir de\u011ferin belirli bir e\u015fi\u011fi a\u015f\u0131p a\u015fmad\u0131\u011f\u0131n\u0131 kontrol etmek gibi senaryolarda watchers tercih edilir. Computed \u00f6zelliklerin aksine, watchers bir de\u011fer d\u00f6nd\u00fcrmezler, sadece bir eylem tetiklerler.<\/p>\n Bu \u00f6rnekte, Her iki \u00f6zellik de Vue’nun reaktif sisteminin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r ve geli\u015ftiricilere verileri ve aray\u00fcz\u00fc etkili bir \u015fekilde y\u00f6netme konusunda b\u00fcy\u00fck esneklik sa\u011flar. Do\u011fru yerde do\u011fru arac\u0131 kullanmak, uygulaman\u0131z\u0131n performans\u0131n\u0131 ve kodunuzun okunabilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131racakt\u0131r.<\/p>\n Vue.js’in en b\u00fcy\u00fck avantajlar\u0131ndan biri, web geli\u015ftiricilerin “boilerplate” (kal\u0131p) kod miktar\u0131n\u0131 en aza indirerek daha verimli \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flamas\u0131d\u0131r. Bile\u015fen tabanl\u0131 (component-based) mimarisi sayesinde, uygulamalar\u0131 k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alara ay\u0131rmak kolayla\u015f\u0131r. Bu yakla\u015f\u0131m, kodun d\u00fczenini iyile\u015ftirmekle kalmaz, ayn\u0131 zamanda bak\u0131m\u0131n\u0131 ve test edilmesini de basitle\u015ftirir. Vue, \u00f6zellikle Tek Dosya Bile\u015fenleri (Single File Components – SFCs) ile bu boilerplate azaltma hedefini m\u00fckemmel bir \u015fekilde ger\u00e7ekle\u015ftirir.<\/p>\n Tek Dosya Bile\u015fenleri, Vue.js’in merkezi bir \u00f6zelli\u011fidir ve bir bile\u015fenin HTML (\u015fablon), JavaScript (mant\u0131k) ve CSS (stil) kodunu tek bir Bu yap\u0131, bile\u015fenlerin okunabilirli\u011fini ve y\u00f6netilebilirli\u011fini art\u0131r\u0131r. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n Bu Bile\u015fenler aras\u0131 ileti\u015fim, modern \u00f6n y\u00fcz uygulamalar\u0131n\u0131n temelidir. Vue.js, bu ileti\u015fimi Prop’lar (Properties) ve Emit’ler (Events) arac\u0131l\u0131\u011f\u0131yla basit ve anla\u015f\u0131l\u0131r bir \u015fekilde sa\u011flar:<\/p>\n Slot’lar, bile\u015fenlerin i\u00e7eri\u011fini daha esnek hale getirmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir Vue \u00f6zelli\u011fidir. Bir bile\u015fenin \u015fablonunda bir Yukar\u0131daki Vue.js’in bu \u00f6zellikleri, geli\u015ftiricilerin karma\u015f\u0131k kullan\u0131c\u0131 aray\u00fczlerini minimal boilerplate ile, mod\u00fcler ve s\u00fcrd\u00fcr\u00fclebilir bir \u015fekilde olu\u015fturmas\u0131n\u0131 sa\u011flar. Bu sayede, daha \u00e7ok i\u015flevsellik geli\u015ftirmeye odaklanabilir ve tekrar eden kod yazma y\u00fck\u00fcnden kurtulabilirsiniz.<\/p>\n Vue.js’in reaktivite g\u00fcc\u00fcn\u00fc ve boilerplate azaltma yetene\u011fini en iyi g\u00f6steren senaryolardan biri, etkile\u015fimli formlar\u0131n geli\u015ftirilmesidir. Kullan\u0131c\u0131 giri\u015flerini an\u0131nda i\u015fleyen, geri bildirim sa\u011flayan ve dinamik olarak g\u00fcncellenen formlar, modern web uygulamalar\u0131n\u0131n vazge\u00e7ilmezidir. Vue’nun \u015eimdi, basit bir kullan\u0131c\u0131 kay\u0131t formu \u00fczerinden Vue.js’in reaktivite prensiplerini ger\u00e7ek bir senaryoda nas\u0131l uygulad\u0131\u011f\u0131m\u0131za bakal\u0131m. Bu formda kullan\u0131c\u0131 ad\u0131, e-posta ve parola alanlar\u0131 olacak ve temel do\u011frulama (validation) kurallar\u0131 uygulayaca\u011f\u0131z.<\/p>\n Bu \u00f6rnekte, Vue.js'in reaktif \u00f6zelliklerini bir araya getirerek dinamik bir form olu\u015fturuyoruz:<\/p>\n Bu \u00f6rnek, Vue.js'in reaktif sistemini kullanarak, minimal boilerplate ile karma\u015f\u0131k form mant\u0131\u011f\u0131n\u0131 nas\u0131l kolayca uygulayabilece\u011fimizi a\u00e7\u0131k\u00e7a g\u00f6stermektedir. Geli\u015ftiriciler, DOM manip\u00fclasyonu veya karma\u015f\u0131k olay dinleyicileri yazmak yerine, sadece veri durumunu y\u00f6netmeye odaklanabilirler. Vue, gerisini sihirli bir \u015fekilde halleder.<\/p>\n Vue.js'in reaktivite sistemi \u00e7o\u011fu zaman \"sihirli\" gibi g\u00f6r\u00fcnse de, b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda bu sistemi daha verimli kullanmak i\u00e7in baz\u0131 ileri d\u00fczey teknikler ve optimizasyon ipu\u00e7lar\u0131 bilmek faydal\u0131d\u0131r. Vue 3 ile birlikte gelen Composition API (Birle\u015fim API'si), reaktiviteyi daha esnek bir \u015fekilde y\u00f6netme imkan\u0131 sunarken, baz\u0131 \u00f6zel fonksiyonlar da performans\u0131 art\u0131rman\u0131za yard\u0131mc\u0131 olur.<\/p>\n Her \u015feyin reaktif olmas\u0131 her zaman istenen bir durum de\u011fildir. Bazen, b\u00fcy\u00fck bir \u00fc\u00e7\u00fcnc\u00fc taraf k\u00fct\u00fcphane \u00f6rne\u011fi veya performans a\u00e7\u0131s\u0131ndan pahal\u0131 olan bir veri yap\u0131s\u0131 gibi, Vue'nun reaktif sistemine dahil edilmesini istemedi\u011finiz nesneler olabilir. Bu durumlarda Vue 3'\u00fcn Composition API'si ile reaktif verileri tan\u0131mlamak i\u00e7in iki ana yol vard\u0131r: Ne Zaman Hangisi?<\/strong> Genel kural olarak, ilkel de\u011ferler i\u00e7in Vue'nun reaktivite sistemi olduk\u00e7a optimize edilmi\u015f olsa da, baz\u0131 durumlarda gereksiz yeniden render i\u015flemlerini \u00f6nlemek i\u00e7in manuel optimizasyonlara ihtiya\u00e7 duyulabilir:<\/p>\n Bu \u00f6rnekte, Bu ileri d\u00fczey teknikler, Vue.js uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 daha da optimize etmenize ve reaktiviteyi belirli senaryolarda daha hassas bir \u015fekilde y\u00f6netmenize olanak tan\u0131r. Her zaman oldu\u011fu gibi, bu ara\u00e7lar\u0131 ne zaman kullanaca\u011f\u0131n\u0131z\u0131 anlamak, uygulaman\u0131z\u0131n gereksinimlerine ve performans profiline ba\u011fl\u0131d\u0131r.<\/p>\n Bu makale boyunca Vue.js'in reaktivite mekanizmas\u0131n\u0131n derinliklerine indik, boilerplate kodunu nas\u0131l azaltt\u0131\u011f\u0131n\u0131 ke\u015ffettik ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 inceledik. G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere, Vue.js, web geli\u015ftiricilerin kar\u015f\u0131la\u015ft\u0131\u011f\u0131 karma\u015f\u0131k sorunlara sade, anla\u015f\u0131l\u0131r ve etkili \u00e7\u00f6z\u00fcmler sunuyor. Reaktif veri ba\u011flama, bile\u015fen tabanl\u0131 mimari, sezgisel API'ler ve d\u00fc\u015f\u00fck \u00f6\u011frenme e\u011frisi sayesinde, Vue.js ile daha h\u0131zl\u0131, daha temiz ve \u015f\u00fcphesiz daha keyifli web uygulamalar\u0131 geli\u015ftirmek kesinlikle m\u00fcmk\u00fcn.<\/p>\n Vue.js, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 setidir. Minimal yap\u0131land\u0131rma ile hemen ba\u015flaman\u0131za olanak tan\u0131rken, b\u00fcy\u00fcyen ve karma\u015f\u0131kla\u015fan uygulamalar i\u00e7in de \u00f6l\u00e7eklenebilir \u00e7\u00f6z\u00fcmler sunar. \u0130ster k\u00fc\u00e7\u00fck bir proje ister b\u00fcy\u00fck bir kurumsal uygulama geli\u015ftiriyor olun, Vue.js'in sundu\u011fu esneklik ve performans optimizasyonlar\u0131, geli\u015ftirme s\u00fcrecinizi d\u00f6n\u00fc\u015ft\u00fcrebilir. Gelecekte de Vue.js'in web geli\u015ftirme d\u00fcnyas\u0131ndaki yerini sa\u011flamla\u015ft\u0131rarak, geli\u015ftiricilere yenilik\u00e7i ve verimli \u00e7\u00f6z\u00fcmler sunmaya devam edece\u011fi \u00f6ng\u00f6r\u00fclmektedir.<\/p>\n Vue.js, di\u011fer pop\u00fcler JavaScript \u00e7at\u0131lar\u0131ndan (React, Angular) daha d\u00fc\u015f\u00fck bir \u00f6\u011frenme e\u011frisine sahiptir. Temel HTML, CSS ve JavaScript bilgisi olan bir geli\u015ftirici, birka\u00e7 hafta i\u00e7inde Vue.js'in temel kavramlar\u0131n\u0131 kavray\u0131p basit uygulamalar geli\u015ftirmeye ba\u015flayabilir. Kapsaml\u0131 d\u00f6k\u00fcmantasyonu ve topluluk deste\u011fi bu s\u00fcreci daha da kolayla\u015ft\u0131r\u0131r.<\/p>\n<\/li>\n Vue.js, genellikle React'ten daha az boilerplate kod gerektirir ve Angular'dan daha az \"fikir belirleyici\" (opinionated) bir yap\u0131ya sahiptir. React'in esnekli\u011fine yak\u0131n bir deneyim sunarken, Angular'\u0131n sundu\u011fu tam te\u015fekk\u00fcll\u00fc \u00e7er\u00e7eve hissiyat\u0131n\u0131 daha hafif bir paketle verir. \u00d6zellikle mevcut projelere a\u015famal\u0131 entegrasyon (progressive adoption) yetene\u011fi ve tek dosya bile\u015fenlerinin basitli\u011fi \u00f6ne \u00e7\u0131kar.<\/p>\n<\/li>\n Evet, kesinlikle. Vue.js, k\u00fc\u00e7\u00fck ve orta \u00f6l\u00e7ekli projelerin yan\u0131 s\u0131ra, Composition API (Birle\u015fim API'si) ve Pinia\/Vuex gibi g\u00fc\u00e7l\u00fc durum y\u00f6netimi (state management) k\u00fct\u00fcphaneleri sayesinde b\u00fcy\u00fck ve karma\u015f\u0131k kurumsal uygulamalar i\u00e7in de son derece uygundur. Modular yap\u0131s\u0131 ve performans optimizasyonlar\u0131, \u00f6l\u00e7eklenebilirli\u011fi destekler.<\/p>\n<\/li>\n Vue.js projeleri i\u00e7in Visual Studio Code (VS Code) en pop\u00fcler ve \u00f6nerilen IDE'lerden biridir. Volar eklentisi (Vue 3 i\u00e7in) ve ESLint, Prettier gibi ara\u00e7lar, geli\u015ftirme deneyiminizi b\u00fcy\u00fck \u00f6l\u00e7\u00fcde iyile\u015ftirir. Proje olu\u015fturmak i\u00e7in ise resmi Vue CLI veya Vite kullan\u0131lmas\u0131 tavsiye edilir.<\/p>\n<\/li>\n<\/ol>\n #Vuejs #WebGeli\u015ftirme #Frontend #JavaScript #Reaktivite<\/p>\n","protected":false},"excerpt":{"rendered":"Modern web uygulamalar\u0131, kullan\u0131c\u0131 etkile\u015fimine an\u0131nda yan\u0131t verebilen, dinamik ve ak\u0131c\u0131 deneyimler sunmay\u0131 hedefler.","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-45404","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n#app<\/code> id’sine sahip div<\/code> elementi Vue uygulamam\u0131z\u0131n kontrol\u00fcndeki alan\u0131 tan\u0131mlar. Vue.createApp()<\/code> ile yeni bir Vue uygulamas\u0131 olu\u015ftururuz. data()<\/code> fonksiyonu, uygulamam\u0131z\u0131n reaktif verilerini d\u00f6nd\u00fcr\u00fcr. Burada mesaj<\/code> ad\u0131nda bir \u00f6zelli\u011fimiz var. HTML i\u00e7inde {{ mesaj }}<\/code> syntax’\u0131 ile bu veriyi g\u00f6r\u00fcnt\u00fcleriz. Bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda mesajiDegistir<\/code> metodu \u00e7al\u0131\u015f\u0131r ve this.mesaj<\/code> de\u011ferini g\u00fcnceller. En \u00f6nemlisi, siz hi\u00e7bir DOM manip\u00fclasyonu yapmadan, sadece veriyi de\u011fi\u015ftirerek aray\u00fcz\u00fcn an\u0131nda g\u00fcncellendi\u011fini g\u00f6receksiniz. Bu, Vue’nun reaktif sisteminin temel bir g\u00f6stergesidir ve geli\u015ftirme s\u00fcrecini inan\u0131lmaz derecede h\u0131zland\u0131r\u0131r.<\/p>\nVeri Reaktivitesi Nas\u0131l \u00c7al\u0131\u015f\u0131r? Vue.js’in Sihirli Dokunu\u015fu<\/h3>\n
data<\/code> \u00f6zelli\u011fi i\u00e7inde tan\u0131mlad\u0131\u011f\u0131n\u0131z her \u015fey reaktif hale getirilir. Vue, bu veri nesnesini bir “reaktif proxy” ile sarmalar. Bu proxy, veri \u00f6zelliklerine eri\u015fildi\u011finde (get) veya de\u011fi\u015ftirildi\u011finde (set) araya girer. Bir \u00f6zellik okundu\u011funda, Vue bu \u00f6zelli\u011fi o anda render edilen bile\u015fenle ili\u015fkilendirir. Bir \u00f6zellik de\u011fi\u015ftirildi\u011finde ise, Vue, bu \u00f6zelli\u011fi kullanan t\u00fcm bile\u015fenleri bulur ve yeniden render (yeniden olu\u015fturma) etmeleri gerekti\u011fini bildirir. Bu sayede, sadece ilgili bile\u015fenler ve DOM par\u00e7alar\u0131 g\u00fcncellenir, bu da performans\u0131 art\u0131r\u0131r.<\/p>\nComputed Properties (Hesaplanm\u0131\u015f \u00d6zellikler) ve Watchers (\u0130zleyiciler) Nelerdir?<\/h4>\n
\n
const app = Vue.createApp({\n data() {\n return {\n urunler: [\n { ad: 'Kitap', fiyat: 50, adet: 2 },\n { ad: 'Kalem', fiyat: 10, adet: 5 }\n ]\n };\n },\n computed: {\n toplamFiyat() {\n return this.urunler.reduce((toplam, urun) => toplam + (urun.fiyat * urun.adet), 0);\n },\n indirimliToplamFiyat() {\n \/\/ Toplam fiyat %10 indirimli\n return this.toplamFiyat * 0.9;\n }\n }\n});\napp.mount('#app');<\/code><\/pre>\n<\/p><\/div>\ntoplamFiyat<\/code>, urunler<\/code> dizisindeki herhangi bir \u00fcr\u00fcn\u00fcn fiyat\u0131 veya adeti de\u011fi\u015fti\u011finde otomatik olarak yeniden hesaplanacakt\u0131r. indirimliToplamFiyat<\/code> ise toplamFiyat<\/code> de\u011fi\u015fti\u011finde yeniden hesaplan\u0131r. Bu, gereksiz hesaplamalar\u0131 \u00f6nler ve kodunuzu daha okunabilir hale getirir.<\/p>\n<\/li>\nconst app = Vue.createApp({\n data() {\n return {\n aramaTerimi: ''\n };\n },\n watch: {\n aramaTerimi(yeniDeger, eskiDeger) {\n console.log(Arama terimi de\u011fi\u015fti: ${eskiDeger} -> ${yeniDeger}<\/code>);\n \/\/ \u00d6rne\u011fin, burada bir API iste\u011fi g\u00f6nderebilirsiniz\n if (yeniDeger.length > 2) {\n this.aramaYap(yeniDeger);\n }\n }\n },\n methods: {\n aramaYap(terim) {\n console.log(${terim} i\u00e7in arama yap\u0131l\u0131yor...<\/code>);\n \/\/ Ger\u00e7ek bir uygulamada burada sunucuya istek at\u0131l\u0131rd\u0131.\n }\n }\n});\napp.mount('#app');<\/code><\/pre>\n<\/p><\/div>\naramaTerimi<\/code> her de\u011fi\u015fti\u011finde watch<\/code> fonksiyonu tetiklenir ve konsola bir mesaj yazd\u0131r\u0131r. E\u011fer terimin uzunlu\u011fu belirli bir e\u015fi\u011fi a\u015farsa, aramaYap<\/code> metodu \u00e7a\u011fr\u0131l\u0131r. Watchers, \u00f6zellikle asenkron (asynchronous) i\u015flemler veya karma\u015f\u0131k veri de\u011fi\u015fikliklerine tepki verme durumlar\u0131nda g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n<\/ol>\nBoilerplate Olmadan Komponent Geli\u015ftirme: Vue’nun Esnek Yap\u0131s\u0131<\/h3>\n
Tek Dosya Bile\u015fenleri (Single File Components) Nedir?<\/h4>\n
.vue<\/code> uzant\u0131l\u0131 dosya i\u00e7inde bir araya getirir. Bu yap\u0131, bile\u015fenlerin kendi kendini kapsamas\u0131n\u0131 (self-contained) sa\u011flar ve geli\u015ftiricilerin ilgili kod par\u00e7alar\u0131n\u0131 kolayca bulup y\u00f6netmesine olanak tan\u0131r. Bir .vue<\/code> dosyas\u0131 genellikle \u00fc\u00e7 ana bloktan olu\u015fur:<\/p>\n\n
<template><\/code>: Bile\u015fenin HTML yap\u0131s\u0131n\u0131 i\u00e7erir.<\/li>\n<script><\/code>: Bile\u015fenin JavaScript mant\u0131\u011f\u0131n\u0131 (veri, metodlar, ya\u015fam d\u00f6ng\u00fcs\u00fc kancalar\u0131 vb.) i\u00e7erir.<\/li>\n<style><\/code>: Bile\u015fenin CSS stillerini i\u00e7erir. scoped<\/code> niteli\u011fi ile bu stillerin sadece mevcut bile\u015feni etkilemesini sa\u011flayabilirsiniz.<\/li>\n<\/ul>\n<!-- MyButton.vue -->\n<template>\n <button @click=\"handleClick\" :class=\"{ 'primary': isPrimary }\">\n <slot>Varsay\u0131lan D\u00fc\u011fme<\/slot>\n <\/button>\n<\/template>\n\n<script>\nexport default {\n props: {\n isPrimary: {\n type: Boolean,\n default: false\n }\n },\n methods: {\n handleClick() {\n this.$emit('buttonClick', 'D\u00fc\u011fmeye t\u0131kland\u0131!');\n }\n }\n}\n<\/script>\n\n<style scoped>\nbutton {\n padding: 10px 15px;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n background-color: #f0f0f0;\n color: #333;\n}\nbutton.primary {\n background-color: #42b983;\n color: white;\n}\n<\/style><\/code><\/pre>\n<\/div>\nMyButton.vue<\/code> dosyas\u0131, hem g\u00f6rsel yap\u0131y\u0131, hem davran\u0131\u015fsal mant\u0131\u011f\u0131 hem de stili tek bir yerde bar\u0131nd\u0131r\u0131r. Bu sayede, bir d\u00fc\u011fme bile\u015feninin t\u00fcm y\u00f6nlerini tek bir bak\u0131\u015fta g\u00f6rebilir ve kolayca de\u011fi\u015ftirebilirsiniz.<\/p>\nProp’lar (\u00d6zellikler) ve Emit’ler (Olaylar) ile \u0130leti\u015fim Nas\u0131l Kurulur?<\/h4>\n
\n
MyButton<\/code> \u00f6rne\u011finde isPrimary<\/code> bir prop’tur.<\/p>\n<!-- ParentComponent.vue -->\n<template>\n <div>\n <h3>\u00dcst Bile\u015fen<\/h3>\n <MyButton :isPrimary=\"true\" @buttonClick=\"handleButtonClick\">\n Ana D\u00fc\u011fme\n <\/MyButton>\n <MyButton :isPrimary=\"false\" @buttonClick=\"handleButtonClick\">\n \u0130kincil D\u00fc\u011fme\n <\/MyButton>\n <p>Son T\u0131klama Mesaj\u0131: {{ lastClickMessage }}<\/p>\n <\/div>\n<\/template>\n\n<script>\nimport MyButton from '.\/MyButton.vue';\n\nexport default {\n components: {\n MyButton\n },\n data() {\n return {\n lastClickMessage: ''\n }\n },\n methods: {\n handleButtonClick(message) {\n this.lastClickMessage = message;\n console.log('\u00dcst bile\u015fenden yakaland\u0131:', message);\n }\n }\n}\n<\/script><\/code><\/pre>\n<\/p><\/div>\nParentComponent<\/code>, MyButton<\/code> bile\u015fenine isPrimary<\/code> prop’unu ge\u00e7irir. Bu sayede alt bile\u015fenin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 \u00fcst bile\u015fenden kontrol edebiliriz.<\/p>\n<\/li>\nthis.$emit('olayAdi', veri)<\/code> metodunu kullanarak bir olay tetikler ve \u00fcst bile\u015fen bu olay\u0131 @olayAdi=\"metodAdi\"<\/code> syntax’\u0131 ile dinler. MyButton<\/code> \u00f6rne\u011finde buttonClick<\/code> bir emit olay\u0131d\u0131r. \u00dcst bile\u015fen bu olay\u0131 dinleyerek alt bile\u015fendeki bir etkile\u015fime tepki verebilir.<\/li>\n<\/ul>\nSlot’lar (Yuvalar) ile Esnek Bile\u015fenler Nas\u0131l Olu\u015fturulur?<\/h4>\n
<slot><\/code> etiketi tan\u0131mlayarak, bu bile\u015fenin render edildi\u011fi yerde \u00fcst bile\u015fenden dinamik i\u00e7erik yerle\u015ftirmesine izin verirsiniz. Bu, bile\u015fenlerinizi daha genel ve yeniden kullan\u0131labilir yapar.<\/p>\nMyButton<\/code> \u00f6rne\u011finde, <slot>Varsay\u0131lan D\u00fc\u011fme<\/slot><\/code> sat\u0131r\u0131 bulunmaktad\u0131r. E\u011fer \u00fcst bile\u015fen, MyButton<\/code>‘\u0131 kullan\u0131rken aras\u0131na herhangi bir i\u00e7erik yazarsa (\u00f6rne\u011fin <MyButton>G\u00f6nder<\/MyButton><\/code>), bu i\u00e7erik slot’un yerine ge\u00e7er. E\u011fer hi\u00e7bir i\u00e7erik sa\u011flanmazsa, “Varsay\u0131lan D\u00fc\u011fme” metni kullan\u0131l\u0131r. Bu, ayn\u0131 bile\u015feni farkl\u0131 metinler veya hatta farkl\u0131 HTML yap\u0131lar\u0131yla kullanman\u0131za olanak tan\u0131r, b\u00f6ylece daha az kodla daha fazla esneklik sa\u011flars\u0131n\u0131z.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131nda Reaktivite: Etkile\u015fimli Bir Form Uygulamas\u0131<\/h3>\n
v-model<\/code> direktifi ve reaktif veri ba\u011flama yetenekleri sayesinde, bu t\u00fcr formlar\u0131 geli\u015ftirmek \u015fa\u015f\u0131rt\u0131c\u0131 derecede kolay ve az kodla yap\u0131labilir.<\/p>\nBir Kullan\u0131c\u0131 Kay\u0131t Formu \u00d6rne\u011fi<\/h4>\n
<!-- RegisterForm.vue -->\n<template>\n <div class=\"form-container\">\n <h3>Yeni Kullan\u0131c\u0131 Kayd\u0131<\/h3>\n <form @submit.prevent=\"kayitOl\">\n <div class=\"form-group\">\n <label for=\"username\">Kullan\u0131c\u0131 Ad\u0131:<\/label>\n <input type=\"text\" id=\"username\" v-model=\"formData.username\">\n <p v-if=\"hatalar.username\" class=\"error-message\">{{ hatalar.username }}<\/p>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"email\">E-posta:<\/label>\n <input type=\"email\" id=\"email\" v-model=\"formData.email\">\n <p v-if=\"hatalar.email\" class=\"error-message\">{{ hatalar.email }}<\/p>\n <\/div>\n\n <div class=\"form-group\">\n <label for=\"password\">Parola:<\/label>\n <input type=\"password\" id=\"password\" v-model=\"formData.password\">\n <p v-if=\"hatalar.password\" class=\"error-message\">{{ hatalar.password }}<\/p>\n <\/div>\n\n <button type=\"submit\" :disabled=\"!formGecerli\">Kay\u0131t Ol<\/button>\n <\/form>\n\n <div v-if=\"kayitBasarili\" class=\"success-message\">\n <p>Kay\u0131t ba\u015far\u0131yla tamamland\u0131! Ho\u015f geldiniz, {{ formData.username }}!<\/p>\n <\/div>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data() {\n return {\n formData: {\n username: '',\n email: '',\n password: ''\n },\n hatalar: {},\n kayitBasarili: false\n };\n },\n computed: {\n formGecerli() {\n \/\/ Formun genel ge\u00e7erlili\u011fini kontrol eder\n return (\n !this.hatalar.username &&\n !this.hatalar.email &&\n !this.hatalar.password &&\n this.formData.username.length > 0 &&\n this.formData.email.length > 0 &&\n this.formData.password.length > 0\n );\n }\n },\n watch: {\n 'formData.username'(newValue) {\n if (newValue.length < 3) {\n this.hatalar.username = 'Kullan\u0131c\u0131 ad\u0131 en az 3 karakter olmal\u0131.';\n } else {\n this.hatalar.username = '';\n }\n },\n 'formData.email'(newValue) {\n if (!\/\\S+@\\S+\\.\\S+\/.test(newValue)) {\n this.hatalar.email = 'Ge\u00e7erli bir e-posta adresi giriniz.';\n } else {\n this.hatalar.email = '';\n }\n },\n 'formData.password'(newValue) {\n if (newValue.length < 6) {\n this.hatalar.password = 'Parola en az 6 karakter olmal\u0131.';\n } else {\n this.hatalar.password = '';\n }\n }\n },\n methods: {\n kayitOl() {\n \/\/ Form g\u00f6nderildi\u011finde son bir do\u011frulama yap\n this.validateForm();\n if (this.formGecerli) {\n console.log('Kay\u0131t verileri:', this.formData);\n \/\/ Ger\u00e7ek bir uygulamada burada sunucuya API iste\u011fi g\u00f6nderilir.\n this.kayitBasarili = true;\n \/\/ Formu s\u0131f\u0131rla\n this.formData = { username: '', email: '', password: '' };\n this.hatalar = {};\n } else {\n this.kayitBasarili = false;\n alert('L\u00fctfen formdaki hatalar\u0131 d\u00fczeltin.');\n }\n },\n validateForm() {\n \/\/ Watcher'lar\u0131n tetiklenmesi i\u00e7in t\u00fcm alanlar\u0131 manuel olarak kontrol et\n this.hatalar = {}; \/\/ Hatalar\u0131 s\u0131f\u0131rla\n if (this.formData.username.length < 3) {\n this.hatalar.username = 'Kullan\u0131c\u0131 ad\u0131 en az 3 karakter olmal\u0131.';\n }\n if (!\/\\S+@\\S+\\.\\S+\/.test(this.formData.email)) {\n this.hatalar.email = 'Ge\u00e7erli bir e-posta adresi giriniz.';\n }\n if (this.formData.password.length < 6) {\n this.hatalar.password = 'Parola en az 6 karakter olmal\u0131.';\n }\n }\n }\n};\n<\/script>\n\n<style scoped>\n.form-container {\n max-width: 400px;\n margin: 20px auto;\n padding: 20px;\n border: 1px solid #ccc;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.form-group {\n margin-bottom: 15px;\n}\nlabel {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n}\ninput[type=\"text\"],\ninput[type=\"email\"],\ninput[type=\"password\"] {\n width: calc(100% - 22px); \/* Padding ve border i\u00e7in ayarlama *\/\n padding: 10px;\n border: 1px solid #ddd;\n border-radius: 4px;\n}\n.error-message {\n color: #e74c3c;\n font-size: 0.9em;\n margin-top: 5px;\n}\nbutton[type=\"submit\"] {\n background-color: #42b983;\n color: white;\n padding: 10px 15px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 1em;\n}\nbutton[type=\"submit\"]:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n}\n.success-message {\n margin-top: 20px;\n padding: 10px;\n background-color: #d4edda;\n color: #155724;\n border: 1px solid #c3e6cb;\n border-radius: 4px;\n}\n<\/style><\/code><\/pre>\n<\/div>\n\n
v-model<\/code> ile \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama:<\/strong> Her input<\/code> etiketi, v-model=\"formData.alanAdi\"<\/code> direktifi kullan\u0131larak formData<\/code> nesnesindeki ilgili \u00f6zellikle iki y\u00f6nl\u00fc olarak ba\u011flanm\u0131\u015ft\u0131r. Bu, kullan\u0131c\u0131n\u0131n girdisi de\u011fi\u015fti\u011finde formData<\/code>'n\u0131n otomatik olarak g\u00fcncellendi\u011fi ve formData<\/code> programatik olarak de\u011fi\u015fti\u011finde input alan\u0131n\u0131n da g\u00fcncellendi\u011fi anlam\u0131na gelir. Bu sayede, input de\u011ferlerini manuel olarak DOM'dan okuma veya ayarlama zahmetinden kurtuluruz.\n <\/li>\nwatch<\/code> ile Anl\u0131k Do\u011frulama ve Hata Mesajlar\u0131:<\/strong> Her bir formData<\/code> alan\u0131 i\u00e7in bir watch<\/code> tan\u0131mlanm\u0131\u015ft\u0131r. Kullan\u0131c\u0131 bir alana veri girdi\u011finde (yani formData<\/code>'daki ilgili \u00f6zellik de\u011fi\u015fti\u011finde), watch<\/code> fonksiyonu tetiklenir ve giri\u015fin ge\u00e7erlili\u011fini kontrol eder. E\u011fer bir hata varsa, hatalar<\/code> nesnesine ilgili hata mesaj\u0131 eklenir. HTML \u015fablonunda, v-if=\"hatalar.alanAdi\"<\/code> ile bu hata mesajlar\u0131 dinamik olarak g\u00f6r\u00fcnt\u00fclenir. Kullan\u0131c\u0131 bir hatay\u0131 d\u00fczeltti\u011finde, watch<\/code> tekrar tetiklenir, hata mesaj\u0131 kald\u0131r\u0131l\u0131r ve aray\u00fcz an\u0131nda g\u00fcncellenir.\n <\/li>\ncomputed<\/code> ile Form Ge\u00e7erlili\u011fi:<\/strong> formGecerli<\/code> ad\u0131nda bir computed \u00f6zellik tan\u0131mlanm\u0131\u015ft\u0131r. Bu \u00f6zellik, t\u00fcm alanlar\u0131n ge\u00e7erli olup olmad\u0131\u011f\u0131n\u0131 ve bo\u015f olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. hatalar<\/code> nesnesindeki veya formData<\/code>'daki herhangi bir de\u011fi\u015fiklik, formGecerli<\/code>'nin otomatik olarak yeniden hesaplanmas\u0131na neden olur. Bu computed \u00f6zelli\u011fin de\u011feri, g\u00f6nder d\u00fc\u011fmesinin :disabled<\/code> \u00f6zelli\u011fine ba\u011flanm\u0131\u015ft\u0131r, b\u00f6ylece form ge\u00e7erli olana kadar d\u00fc\u011fme pasif kal\u0131r. Bu, kullan\u0131c\u0131ya do\u011fru zamanda geri bildirim sa\u011flaman\u0131n ve ge\u00e7ersiz form g\u00f6nderimlerini engellemenin temiz bir yoludur.\n <\/li>\n@submit.prevent=\"kayitOl\"<\/code> ile g\u00f6nderilmesi, varsay\u0131lan HTML form g\u00f6nderimini engeller ve kayitOl<\/code> metodumuzu tetikler. Bu metod, son bir do\u011frulama yapar ve form ge\u00e7erliyse verileri i\u015fler (ger\u00e7ek bir uygulamada bir API'ye g\u00f6nderilir). Ba\u015far\u0131l\u0131 kay\u0131t durumunda, kayitBasarili<\/code> reaktif \u00f6zelli\u011fi true<\/code> yap\u0131l\u0131r ve kullan\u0131c\u0131ya bir ba\u015far\u0131 mesaj\u0131 g\u00f6sterilir.<\/li>\n<\/ul>\nVue.js ile \u0130leri D\u00fczey Reaktivite Y\u00f6netimi ve Optimizasyon \u0130pu\u00e7lar\u0131<\/h3>\n
Reaktif Nesnelerden Ka\u00e7\u0131nma:
markRaw<\/code> ve toRaw<\/code><\/h4>\nmarkRaw<\/code> ve toRaw<\/code> fonksiyonlar\u0131 devreye girer:<\/p>\n\n
markRaw(obj)<\/code>:<\/strong> Bir nesneyi reaktif hale getirilmekten \"i\u015faretler\". Yani, bu nesneye veya alt \u00f6zelliklerine yap\u0131lan de\u011fi\u015fiklikler Vue taraf\u0131ndan izlenmez ve aray\u00fcz\u00fc g\u00fcncellemez. Bu, \u00f6zellikle b\u00fcy\u00fck, de\u011fi\u015fmez (immutable) veri yap\u0131lar\u0131yla veya DOM \u00f6\u011feleriyle \u00e7al\u0131\u015f\u0131rken performans kazanc\u0131 sa\u011flayabilir.<\/p>\nimport { reactive, markRaw } from 'vue';\n\nconst buyukVeri = markRaw({ \/* \u00e7ok b\u00fcy\u00fck bir veri nesnesi *\/ });\nconst state = reactive({\n veri: buyukVeri,\n sayac: 0\n});\n\n\/\/ state.veri'ye yap\u0131lan de\u011fi\u015fiklikler reaktif olmaz\n\/\/ state.sayac'a yap\u0131lan de\u011fi\u015fiklikler reaktif olur<\/code><\/pre>\n<\/p><\/div>\n<\/li>\ntoRaw(proxy)<\/code>:<\/strong> Bir reaktif proxy'nin orijinal, reaktif olmayan halini d\u00f6nd\u00fcr\u00fcr. Bu, \u00f6zellikle bir reaktif nesneyi d\u0131\u015f bir k\u00fct\u00fcphaneye ge\u00e7irmeniz gerekti\u011finde veya performans kritik i\u015flemlerde reaktif olmayan bir kopyayla \u00e7al\u0131\u015fmak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r.<\/p>\nimport { reactive, toRaw } from 'vue';\n\nconst reaktifNesne = reactive({ ad: 'Vue', versiyon: 3 });\nconst hamNesne = toRaw(reaktifNesne);\n\nconsole.log(hamNesne === reaktifNesne); \/\/ false, farkl\u0131 nesneler\nconsole.log(hamNesne.ad); \/\/ 'Vue'\n\/\/ hamNesne \u00fczerinde yap\u0131lan de\u011fi\u015fiklikler reaktif olmaz<\/code><\/pre>\n<\/p><\/div>\n<\/li>\n<\/ul>\nref<\/code> ve reactive<\/code> Aras\u0131ndaki Farklar ve Kullan\u0131m Senaryolar\u0131<\/h4>\nref<\/code> ve reactive<\/code>.<\/p>\n\n
ref()<\/code>:<\/strong> Herhangi bir de\u011feri (ilkel tipler, nesneler, diziler) reaktif hale getirir. .value<\/code> \u00f6zelli\u011fi arac\u0131l\u0131\u011f\u0131yla eri\u015filir ve de\u011fi\u015ftirilir.<\/p>\nimport { ref } from 'vue';\n\nconst sayac = ref(0); \/\/ \u0130lkel tip\nconst kullanici = ref({ ad: 'Ali', yas: 30 }); \/\/ Nesne\n\nconsole.log(sayac.value); \/\/ 0\nsayac.value++; \/\/ De\u011fer de\u011fi\u015fti\u011finde reaktif olarak izlenir\n\nconsole.log(kullanici.value.ad); \/\/ 'Ali'\nkullanici.value.ad = 'Ay\u015fe'; \/\/ Nesnenin i\u00e7indeki de\u011fi\u015fiklikler de reaktif<\/code><\/pre>\n<\/p><\/div>\nref<\/code>, \u00f6zellikle tek bir de\u011feri reaktif hale getirmeniz gerekti\u011finde veya Composition API'de fonksiyonlar aras\u0131nda reaktif de\u011ferleri ta\u015f\u0131rken kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<\/li>\nreactive()<\/code>:<\/strong> Sadece nesneleri (veya dizileri) reaktif hale getirir. \u0130lkel tiplerle kullan\u0131lamaz. Nesnenin kendisine do\u011frudan eri\u015filir ve de\u011fi\u015ftirilir.<\/p>\nimport { reactive } from 'vue';\n\nconst state = reactive({\n mesaj: 'Merhaba',\n kullanici: { ad: 'Veli', yas: 25 }\n});\n\nconsole.log(state.mesaj); \/\/ 'Merhaba'\nstate.mesaj = 'Ho\u015f Geldiniz'; \/\/ Reaktif olarak izlenir\n\nconsole.log(state.kullanici.ad); \/\/ 'Veli'\nstate.kullanici.ad = 'Zeynep'; \/\/ Nesnenin i\u00e7indeki de\u011fi\u015fiklikler de reaktif<\/code><\/pre>\n<\/p><\/div>\nreactive<\/code>, birden fazla reaktif \u00f6zelli\u011fi tek bir nesne i\u00e7inde gruplamak istedi\u011finizde tercih edilir. Genellikle karma\u015f\u0131k durum (state) y\u00f6netimi i\u00e7in kullan\u0131l\u0131r.<\/p>\nref<\/code>, nesneler ve diziler i\u00e7in reactive<\/code> kullanabilirsiniz. Ancak, tutarl\u0131l\u0131k ve basitlik ad\u0131na bir\u00e7ok geli\u015ftirici t\u00fcm reaktif de\u011ferler i\u00e7in ref<\/code> kullanmay\u0131 tercih eder, \u00e7\u00fcnk\u00fc ref<\/code> hem ilkel hem de nesne de\u011ferlerini kapsar ve .value<\/code> eri\u015fimi sayesinde kodun reaktif bir de\u011ferle \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a belirtir.<\/p>\n<\/li>\n<\/ul>\nPerformans \u0130pu\u00e7lar\u0131:
v-once<\/code>, v-memo<\/code><\/h4>\n\n
v-once<\/code>:<\/strong> Bir elementin veya bile\u015fenin sadece bir kez render edilmesini sa\u011flar. Verileri de\u011fi\u015fse bile, o elementin i\u00e7eri\u011fi bir daha g\u00fcncellenmez. Statik i\u00e7erikler veya sadece ilk render an\u0131nda veriye ihtiya\u00e7 duyan bile\u015fenler i\u00e7in idealdir.<\/p>\n<template>\n <div>\n <p v-once>Bu metin sadece bir kez render edilecek: {{ statikMesaj }}<\/p>\n <p>Bu metin her zaman g\u00fcncellenecek: {{ dinamikMesaj }}<\/p>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data() {\n return {\n statikMesaj: '\u0130lk de\u011fer',\n dinamikMesaj: 'De\u011fi\u015febilir de\u011fer'\n }\n }\n}\n<\/script><\/code><\/pre>\n<\/p><\/div>\n<\/li>\nv-memo<\/code> (Vue 3.2+):<\/strong> Bir element veya bile\u015fen a\u011fac\u0131n\u0131n, yaln\u0131zca belirli ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fti\u011finde yeniden render edilmesini sa\u011flar. Ba\u011f\u0131ml\u0131l\u0131klar de\u011fi\u015fmedi\u011fi s\u00fcrece, Vue bu b\u00f6l\u00fcm\u00fc atlar ve performans\u0131 art\u0131r\u0131r. \u00c7oklu v-if<\/code> veya v-for<\/code> dallar\u0131 gibi karma\u015f\u0131k listeler ve ko\u015fullu render'lar i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<template>\n <div v-memo=\"[sayac > 5]\">\n <p>Saya\u00e7: {{ sayac }}<\/p>\n <p>Bu k\u0131s\u0131m sadece saya\u00e7 5'i ge\u00e7ti\u011finde yeniden \u00e7izilir.<\/p>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n data() {\n return {\n sayac: 0\n }\n },\n mounted() {\n setInterval(() => {\n this.sayac++;\n }, 1000);\n }\n}\n<\/script><\/code><\/pre>\n<\/p><\/div>\ndiv<\/code> i\u00e7indeki i\u00e7erik, yaln\u0131zca sayac > 5<\/code> ifadesinin de\u011feri de\u011fi\u015fti\u011finde (yani saya\u00e7 5'ten 6'ya ge\u00e7ti\u011finde) yeniden render edilir. Aksi takdirde, sayac<\/code> her de\u011fi\u015fti\u011finde div<\/code>'in i\u00e7indeki i\u00e7erik yeniden i\u015flenmez.<\/p>\n<\/li>\n<\/ul>\nSonu\u00e7: Vue.js ile Daha H\u0131zl\u0131 ve Keyifli Web Geli\u015ftirme M\u00fcmk\u00fcn m\u00fc?<\/h3>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h4>\n
\n