Merhaba arkadaşlar, bugün sizlere Vue 3'ün en sevdiğim özelliklerinden biri olan `<script setup>` syntax'ının, kod tekrarını nasıl inanılmaz derecede azalttığından bahsedeceğim. Bu yeni syntax'ı ilk gördüğümde, "Bunca yıldır bu kadar boilerplate kodu yazmakla mı uğraşıyormuşum?" diye düşünmüştüm. Gerçekten hayat kurtarıcı bir özellik.
Eski Usulde Bir Component Nasıldı?
Vue 2 veya Vue 3'te Options API kullanırken, her bir reactive property, computed, method veya lifecycle hook'u tanımlamak için belirli bir yere yazmamız gerekiyordu. Bu, component büyüdükçe aynı değişkeni veya metodu farklı bölümlerde (data, methods, computed) tekrar tekrar tanımlamamıza yol açıyordu. Ayrıca, props ve emit'leri kullanmak için `setup()` fonksiyonu içinde de ayrıca tanımlama yapmamız gerekiyordu. İşte tipik bir örnek:
Gördüğünüz gibi, `count` değişkenini hem `props`'tan alıyoruz, hem `data` içinde tanımlıyoruz, hem de `methods` içindeki fonksiyonlarda `this.count` şeklinde kullanıyoruz. `increment` metodunda aynı zamanda bir `$emit` işlemi yapıyoruz. Her şey farklı bloklara dağılmış durumda.
Yeni Nesil: `<script setup>` Devrimi
Şimdi gelin, aynı component'i `<script setup>` syntax'ı ile nasıl daha az kod ve daha doğal bir JavaScript hissiyle yazabileceğimize bakalım. Burada her şey doğrudan script içinde, sanki normal bir JavaScript modülü yazıyormuş gibi.
Karşılaştırma ve Kazanımlar
İki kodu yan yana koyduğumuzda fark bariz ortada. `<script setup>` ile gelen avantajları sıralayalım:
1. Boilerplate Yok: `export default {}` objesini, `setup()` fonksiyonunu ve içindeki `return` ifadesini yazmıyoruz. Kod doğrudan çalışıyor.
2. `this` Karmaşası Yok: Artık `this.count`, `this.increment()` gibi ifadeler yok. Her şey doğrudan tanımlandığı isimle (`count.value`, `increment()`) erişilebilir. Bu, TypeScript ile çalışırken de büyük kolaylık sağlıyor.
3. Props/Emit Tanımı Daha Net: `defineProps` ve `defineEmits` makroları ile props ve emit'lerin tanımı, kullanıldığı yere çok daha yakın. Ayrıca TypeScript ile kullanımı mükemmel.
4. Kod Organizasyonu Özgürlüğü: Artık reactive değişkenleri, computed'ları ve fonksiyonları mantıksal gruplar halinde istediğiniz sırayla yazabilirsiniz. Hepsi aynı scope'ta olduğu için birbiriyle ilişkili kodları bir arada tutmak çok kolay.
5. Daha Az Karakter, Daha Az Tekrar: İlk örnekteki `data()`, `computed:`, `methods:` blok tanımlayıcıları ve sürekli tekrarlanan `this` keyword'ü tamamen ortadan kalktı. Bu, hem yazma hem de okuma kolaylığı sağlıyor.
Son Söz ve Sorum
`<script setup>` syntax'ı, Vue 3'ün Composables (Composition API) ile birlikte sunduğu gücü, en minimal ve okunabilir şekilde kullanmamızı sağlıyor. Özellikle büyük ve karmaşık component'ler yazarken, kodun farklı bölümleri arasında gezinmek ve mantığı takip etmek eskiye göre katbekat daha kolay.
Peki siz Vue 3'e geçiş yaptınız mı? `<script setup>` syntax'ını kullanıyor musunuz? Yaşadığınız en büyük kolaylık ne oldu? Yoksa hala Options API'ın düzenini mi tercih ediyorsunuz? Yorumlarda deneyimlerinizi paylaşın, tartışalım!
Eski Usulde Bir Component Nasıldı?Vue 2 veya Vue 3'te Options API kullanırken, her bir reactive property, computed, method veya lifecycle hook'u tanımlamak için belirli bir yere yazmamız gerekiyordu. Bu, component büyüdükçe aynı değişkeni veya metodu farklı bölümlerde (data, methods, computed) tekrar tekrar tanımlamamıza yol açıyordu. Ayrıca, props ve emit'leri kullanmak için `setup()` fonksiyonu içinde de ayrıca tanımlama yapmamız gerekiyordu. İşte tipik bir örnek:
JavaScript:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ doubledCount }}</p>
<button @click="increment">Arttır</button>
<button @click="resetCounter">Sıfırla</button>
</div>
</template>
<script>
export default {
props: {
initialCount: {
type: Number,
default: 0
}
},
data() {
return {
count: this.initialCount,
title: 'Sayaç Uygulaması'
};
},
computed: {
doubledCount() {
return this.count 2;
}
},
methods: {
increment() {
this.count++;
this.$emit('count-changed', this.count);
},
resetCounter() {
this.count = 0;
}
},
mounted() {
console.log('Component mount oldu!');
}
};
</script>Gördüğünüz gibi, `count` değişkenini hem `props`'tan alıyoruz, hem `data` içinde tanımlıyoruz, hem de `methods` içindeki fonksiyonlarda `this.count` şeklinde kullanıyoruz. `increment` metodunda aynı zamanda bir `$emit` işlemi yapıyoruz. Her şey farklı bloklara dağılmış durumda.
Yeni Nesil: `<script setup>` DevrimiŞimdi gelin, aynı component'i `<script setup>` syntax'ı ile nasıl daha az kod ve daha doğal bir JavaScript hissiyle yazabileceğimize bakalım. Burada her şey doğrudan script içinde, sanki normal bir JavaScript modülü yazıyormuş gibi.
JavaScript:
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ doubledCount }}</p>
<button @click="increment">Arttır</button>
<button @click="resetCounter">Sıfırla</button>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
// Props tanımı
const props = defineProps({
initialCount: {
type: Number,
default: 0
}
});
// Emit tanımı
const emit = defineEmits(['count-changed']);
// Reactive state'ler (eski data bloğu)
const count = ref(props.initialCount);
const title = ref('Sayaç Uygulaması');
// Computed property (eski computed bloğu)
const doubledCount = computed(() => count.value 2);
// Methods (eski methods bloğu)
function increment() {
count.value++;
emit('count-changed', count.value);
}
function resetCounter() {
count.value = 0;
}
// Lifecycle hook (eski mounted)
onMounted(() => {
console.log('Component mount oldu!');
});
</script>İki kodu yan yana koyduğumuzda fark bariz ortada. `<script setup>` ile gelen avantajları sıralayalım:
1. Boilerplate Yok: `export default {}` objesini, `setup()` fonksiyonunu ve içindeki `return` ifadesini yazmıyoruz. Kod doğrudan çalışıyor.
2. `this` Karmaşası Yok: Artık `this.count`, `this.increment()` gibi ifadeler yok. Her şey doğrudan tanımlandığı isimle (`count.value`, `increment()`) erişilebilir. Bu, TypeScript ile çalışırken de büyük kolaylık sağlıyor.
3. Props/Emit Tanımı Daha Net: `defineProps` ve `defineEmits` makroları ile props ve emit'lerin tanımı, kullanıldığı yere çok daha yakın. Ayrıca TypeScript ile kullanımı mükemmel.
4. Kod Organizasyonu Özgürlüğü: Artık reactive değişkenleri, computed'ları ve fonksiyonları mantıksal gruplar halinde istediğiniz sırayla yazabilirsiniz. Hepsi aynı scope'ta olduğu için birbiriyle ilişkili kodları bir arada tutmak çok kolay.
5. Daha Az Karakter, Daha Az Tekrar: İlk örnekteki `data()`, `computed:`, `methods:` blok tanımlayıcıları ve sürekli tekrarlanan `this` keyword'ü tamamen ortadan kalktı. Bu, hem yazma hem de okuma kolaylığı sağlıyor.
Son Söz ve Sorum`<script setup>` syntax'ı, Vue 3'ün Composables (Composition API) ile birlikte sunduğu gücü, en minimal ve okunabilir şekilde kullanmamızı sağlıyor. Özellikle büyük ve karmaşık component'ler yazarken, kodun farklı bölümleri arasında gezinmek ve mantığı takip etmek eskiye göre katbekat daha kolay.
Peki siz Vue 3'e geçiş yaptınız mı? `<script setup>` syntax'ını kullanıyor musunuz? Yaşadığınız en büyük kolaylık ne oldu? Yoksa hala Options API'ın düzenini mi tercih ediyorsunuz? Yorumlarda deneyimlerinizi paylaşın, tartışalım!