Vue.js Computed ve Method Farkı
Hepinize merhaba dostlarım 😊. Uzun yorucu ve inanılmaz hızlı geçen bir haftanın son günlerindeyken yine yeni bir makale yazma isteğimle karşınızdayım 😅. Bunu artık hafta sonu geldiği zamanlardan da rahat bir şekilde anlayacağınızı umuyorum 😊.
Aslında bu benim bu yılki son makalem diyebilirim dostlarım. Yakın zaman sonra Askerliğimin açıklanması durumunda yoğun bir koşturma içerisine gireceğim için son makalemi de yazmadan sizlere yeni bir bir yazılım konusu ile ilgili makale yazmadan gitmeye içim el vermedi. Harici olarak da linkedin üzerinden de DM yoluyla birkaç yazılımcı dostumun istediği bir konudan da sizlere bahsetmek istedim dostlarım. Aklınıza hemen şu gelebilir ben seziyorum
Acaba alanında uzman yazılımcı dostlarımız zor bir konu istedi galiba onu işleyeceğiz 😅
Yok yok dostlarım kendinize öyle bir algı oluşturmayın. Konu aslında bir tartışma konusu diyebiliriz. Yani konumuz --> daha da sadede gelecek olursak bana gelen soru şu şekildeydi
Hocam Computed ile Method arasında ne fark var yani bize computed olayını anlatmıştınız. Bunu methodlarla da yapamaz mıyız ?
şeklinde bir soru gelmişti. Öncelikle soruyu soran dostuma öğrenme aşamasında bu şekilde güzel soru sorduğu için çok teşekkür ediyorum. Sözü daha fazla uzatmadan dostlarım bu konuyu açıklayacağız ve 1 örnek yapacağız. Bunu çok uzun dillendirmeme gerek yok dostlarım. Ezbere öğrenmek yerine işin temel pratiğini, püf noktasını, ne zaman kullanacağımız vs. hakkında bilgi vereceğim.
Sözü daha fazla uzatmadan hemen konuya geçelim dostlarım yoksa benim çenem her zamanki gibi düşecek 😅
Computed ve Method Arasındaki Fark Nedir ?
Eveeeeet dostlarım 😊. Artık geldik makalemizin en ama en civcivli kısmına. Proje geliştirirken yeri geliyor method kullanıyoruz, yeri geliyor computed kullanıyoruz. Tamam süper bu noktaya kadar herhangi bir problem yok.
Ama bunların da temal farkını bilmemiz bizim ileriki zamanlarda proje geliştirme süreçlerimizde bizim yapıyı önceden zihnimizde oluşturmamız açısından son derece önemlidir dostlarım bunu her zaman her yazılım dilinde yapmamız gerekmektedir.
Şimdi olaya gelecek olursak dostlarım başklıkta da bahsettiğimiz computed ve method arasındaki temel fark nedir ona bir bakalım
Dostlarım bundan önceki yazılarımda computed ve method kullanarak örnekler yapmıştık. Hatta bir button yardımıyla methodu çağırmıştık ya da uygulama çalıştığında o methodun çalışmasını istemiştik.
Ama aklımıza Linkedin üzerindeki bize ulaşan dostumuzun sorusu ilk zamanlar geliyor bana da zamanında gelmişti bu soru
Bunu methodlarla da yapamaz mıyız ?
Cevabı söylemek gerekirse "Evet dostlarım yapılabilir". Yapılır çünkü oradaki işlem ne ise methodda da ona benzer tanımlayabiliriz dostlarım.
Lakin
Bizim yazdığımız computed olayında bu işlem bir nevi cache mantığında tutulurken method olayında (ve bunu sık sık sağda solda kullanırsak) yeniden bir bellek kullanımı benzeri olay çıkacağından sistemin ileriki durumlarda yorulması öngörülecektir dostlarım.
Örneği aşağıda kodlarla anlatacağım dostlarım
Şimdi hızlıca gelelim bir örnek yapalım dostlarım. Öncelikle kodlama editörlerimizi açalım ve
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Computed ve Method Farkı | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Computed ve Method Farkı | MFSoftware Blog",
data: {}
});
</script>
</body>şeklinde kodlarımızı yazalım. Bu kısma kadar yazdıktan sonra ise dostlarım bir tane input oluşturalım. Bunun içerisine ismimizi yazalım. Bir tane computed ve method oluşturalım. 2 kere computedi çağıralım, 2 kere de methodu çağıralım
Hemen kodlama kısmımızı yazalım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Computed ve Method Farkı | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<input type="text" class="form-control" placeholder="İsminiz" v-model="isim">
</div>
</div>
<hr>
<div class="row">
{{ getIsim }}
</div>
<hr>
<div class="row">
{{ getIsim }}
</div>
<hr>
<div class="row">
{{ getIsimMethod() }}
</div>
<hr>
<div class="row">
{{ getIsimMethod() }}
</div>
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Computed ve Method Farkı | MFSoftware Blog",
computed : {
getIsim(){
console.log("Computed Dostumuz Geldi Hoşgeldi");
return this.isim.toUpperCase();
}
},
data: {
isim : "MFSoftware Blog"
},
methods : {
getIsimMethod(){
console.log("Method Dostumuz Geldi Hoşgeldi");
return this.isim;
}
}
});
</script>
</body>şeklinde kodlarımızı yazalım dostlarım. Ekrana geldiğimizde ise karşımıza çıkan çıktı
şeklinde bir çıktı şu an mevcut dostlarım. Ama console ekranını açtığımızda karşımıza gelecek olan çıktı ise
Computed Dostumuz Geldi Hoşgeldi
Method Dostumuz Geldi Hoşgeldi
Method Dostumuz Geldi Hoşgeldişeklinde bir sonuç karşımıza gelecektir. Şimdi diyorsunuzdur içinizden
Hocam hem computed'i hem de methodu iki kere çağırdık. Neden computed 1 kez çalıştı ?
işte demek istediğim olay tam olarak bu dostlarım. Computed bir cache mantığı çalışırken, method cache mantığı haricinde kaç kere çağrıldıysa o defa çalışır. Özellikle büyük uygulamalrda bunun gibi sıklıkla fonksiyon kullanmak yerine computed kullanıp işlemlerinizi gerçekleştirebilirsiniz 😊. Bütün işlemler bu kadar dostlarım
Eveeeet dostlarım. Bu makalemde sizlere elimden geldiğince dilim döndüğünce "Vue.js Computed ve Method Farkı" konusundan bahsettim. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık veya zor gelebilir anlıyorum. Özellikle öğrenme sürecinde bu ve bunun gibi durumlarla karşılaşmanız son derece normaldir. Bu durumda sizlerden yapmanızı istediğim tek şey her makalemde de değindiğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız" şeklinde olacaktır. Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır dostlarım 😊
Aynı zamanda 25 Aralık 2022 de kurmuş olduğum seyyaryazilimci.com soru cevap sitesi de yayında dostlarım haberiniz olsun. Her zaman dediğim gibi sorular ve cevaplar belirli bir süre admin onayından geçerek sistem üzerinde yayınlanmaktadır dostlarım bilginiz olsun😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer