Reaktif Sistem
Reaktif Sistem, Vue.js'in çekirdeğini oluşturan ve veriler değiştiğinde kullanıcı arayüzünün otomatik olarak güncellenmesini sağlayan bir yapıdır. Bu sistem, veri nesnelerindeki değişiklikleri izleyen ve ilgili bileşenleri yeniden render eden Gözlemci (Observer) deseni üzerine kuruludur. Vue.js geliştirmede, bu sistem minimum manuel DOM manipülasyonu ile dinamik ve yüksek performanslı uygulamalar oluşturmak için hayati öneme sahiptir.
Reaktif Sistem, verilerin çalışma zamanında değişebileceği durumlarda kullanılır - ister kullanıcı etkileşimleri, API yanıtları veya zamanlayıcı olayları yoluyla olsun. Vue.js bunu, bağımlılıkları takip eden ve bildirimleri tetikleyen veri özellikleri için özel getter/setter'lar aracılığıyla uygular. Anahtar kavramlar arasında data() fonksiyonları ile reaktif sözdizimi, Ref ve Reactive gibi reaktif veri yapıları ve bağımlılık yönetimi algoritmaları bulunur.
Bu eğitimde, Vue.js'te Reaktif Sistem'in nasıl çalıştığını, projelerde nasıl etkili bir şekilde kullanılacağını ve yaygın hatalardan nasıl kaçınılacağını öğreneceksiniz. Temel OOP prensiplerini ve Vue.js'in sürdürülebilir ve ölçeklenebilir uygulamalar oluşturmak için reaktiviteyi sistem mimarisine nasıl entegre ettiğini anlayacaksınız.
Temel Örnek
text<template>
<div>
<h1>Reaktif Sayacı: {{ count }}</h1>
<button @click="increment">Arttır</button>
<button @click="decrement">Azalt</button>
<p>Durum: {{ statusMessage }}</p>
</div>
</template>
<script>
export default {
name: 'ReaktifSayac',
data() {
return {
count: 0,
maxCount: 10,
minCount: -5
}
},
computed: {
statusMessage() {
if (this.count > 5) return 'Yüksek';
if (this.count < 0) return 'Negatif';
return 'Normal';
}
},
methods: {
increment() {
if (this.count < this.maxCount) {
this.count++;
}
},
decrement() {
if (this.count > this.minCount) {
this.count--;
}
}
},
watch: {
count(newValue, oldValue) {
console.log(`Sayaç ${oldValue} değerinden ${newValue} değerine değişti`);
}
}
}
</script>Bu temel örnek, bir sayaç kullanarak Vue.js'in Reaktif Sistem'ini göstermektedir. data() fonksiyonu, count, maxCount ve minCount reaktif özelliklerini tanımlar. count değiştiğinde, Vue.js otomatik olarak bileşenin yeniden render edilmesini tetikler. computed özelliği statusMessage, türetilmiş verilerin nasıl reaktif kaldığını gösterir: count değiştiğinde ek kod olmadan otomatik olarak yeniden hesaplanır.
increment ve decrement metodları count değerini değiştirir. Vue.js, reaktif setter'ları aracılığıyla bu değişiklikleri algılar ve uygulamanın tüm bağımlı bölümlerini günceller. watch bloğu, özellikle count değişikliklerini izler ve bunları kaydeder - API çağrıları veya karmaşık mantık gibi yan etkiler için kullanışlıdır.
Gerçek Vue.js projelerinde, bu desen formlar, veri getirme ve durum yönetimi için kullanılır. Yeni başlayanlar genellikle this.count = 5 gibi doğrudan özellik atamalarının neden çalıştığını merak eder - bu, Vue.js'in reaktif proxy sistemi sayesindedir. Yalnızca başlangıçta data() içinde tanımlanan özelliklerin reaktif olduğunu bilmek önemlidir. Sonradan eklenen özellikler için reaktivite Vue.set() gerektirir.
Pratik Örnek
text<template>
<div>
<h2>Ürün Yönetimi</h2>
<div>
<input v-model="newProduct.name" placeholder="Ürün adı" />
<input v-model.number="newProduct.price" type="number" placeholder="Fiyat" />
<button @click="addProduct" :disabled="!isValidProduct">Ekle</button>
</div>
<div>
<input v-model="searchTerm" placeholder="Ürünleri filtrele..." />
<button @click="sortByPrice">Fiyata göre sırala</button>
</div>
<ul>
<li v-for="product in filteredProducts" :key="product.id">
{{ product.name }} - {{ product.price }}₺
<button @click="removeProduct(product.id)">Sil</button>
</li>
</ul>
<div>
<h3>İstatistikler: {{ statistics.totalValue }}₺ Toplam değer</h3>
</div>
</div>
</template>
<script>
import { reactive, computed, watch, onUnmounted } from 'vue';
export default {
name: 'UrunYoneticisi',
setup() {
const state = reactive({
products: [
{ id: 1, name: 'Dizüstü Bilgisayar', price: 999 },
{ id: 2, name: 'Fare', price: 29 },
{ id: 3, name: 'Klavye', price: 79 }
],
newProduct: { name: '', price: 0 },
searchTerm: '',
sortAscending: true
});
const isValidProduct = computed(() => {
return state.newProduct.name.trim() !== '' &&
state.newProduct.price > 0;
});
const filteredProducts = computed(() => {
let filtered = state.products.filter(product =>
product.name.toLowerCase().includes(state.searchTerm.toLowerCase())
);
filtered.sort((a, b) => state.sortAscending ?
a.price - b.price : b.price - a.price);
return filtered;
});
const statistics = computed(() => {
const total = filteredProducts.value.reduce((sum, product) =>
sum + product.price, 0);
return { totalValue: total };
});
let nextId = 4;
const addProduct = () => {
if (isValidProduct.value) {
state.products.push({
id: nextId++,
name: state.newProduct.name.trim(),
price: state.newProduct.price
});
state.newProduct = { name: '', price: 0 };
}
};
const removeProduct = (id) => {
const index = state.products.findIndex(p => p.id === id);
if (index !== -1) {
state.products.splice(index, 1);
}
};
const sortByPrice = () => {
state.sortAscending = !state.sortAscending;
};
const searchWatcher = watch(
() => state.searchTerm,
(newSearch, oldSearch) => {
console.log(`Arama terimi değişti: "${oldSearch}" -> "${newSearch}"`);
}
);
onUnmounted(() => {
searchWatcher();
});
return {
...state,
isValidProduct,
filteredProducts,
statistics,
addProduct,
removeProduct,
sortByPrice
};
}
}
</script>Vue.js için reaktif sistemlerde en iyi uygulamalar, veri yapılarının doğru kullanımıyla başlar. Composition API'de nesneler için reactive() ve ilkel değerler için ref() kullanın. Reaktif nesnelerin doğrudan yeniden atanmasından kaçının çünkü bu reaktiviteyi bozabilir. Bunun yerine, diziler için push() veya splice() gibi yöntemleri kullanın.
Yaygın hatalar arasında temizlenmemiş izleyiciler ve olay dinleyicileri yoluyla bellek sızıntıları bulunur. Kaynakları serbest bırakmak için Composition API'de onUnmounted() kullanın. Computed özelliklerdeki verimsiz algoritmalar performans sorunlarına neden olabilir - computed özellikler saf ve yan etkisiz olmalıdır.
Hata ayıklama ipuçları: Reaktif verileri incelemek için Vue Devtools'u kullanın ve karmaşık durum değişiklikleri için console log'larıyla izleyiciler ayarlayın. Tembel izleyiciler (watchEffect vs watch) ve v-once veya memoization ile gereksiz yeniden render'lardan kaçınarak performans optimizasyonu elde edin.
Güvenlik hususları: Reaktif bağlamalarda kullanıcı girişlerinin dikkatli bir şekilde işlenmesi yoluyla XSS risklerinden kaçının. Yalnızca güvenilir içerik için v-html kullanın ve işlemeden önce her zaman reaktif verileri doğrulayın.
📊 Referans Tablosu
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| reactive() | Reaktif bir proxy nesnesi oluşturur | const state = reactive({ count: 0 }) |
| computed() | Türetilmiş değerleri reaktif olarak hesaplar | const double = computed(() => state.count * 2) |
| watch() | Reaktif kaynaklardaki değişiklikleri izler | watch(() => state.count, (newVal) => console.log(newVal)) |
| ref() | İlkel değerler için reaktif bir referans oluşturur | const count = ref(0) |
| watchEffect() | Bağımlılık değişikliklerinde yan etkileri yürütür | watchEffect(() => console.log(state.count)) |
| onUnmounted() | Bileşen yok edilirken kaynakları temizler | onUnmounted(() => clearInterval(timer)) |
Vue.js'in Reaktif Sistemi, modern web uygulama geliştirme için temeldir. Reaktivitenin getter/setter'lar ve proxy nesneleri aracılığıyla nasıl uygulandığını, computed özelliklerin ve izleyicilerin nasıl çalıştığını ve yaygın tuzaklardan nasıl kaçınılacağını öğrendiniz. Bu bilgi sizi durum yönetimi ve bileşen iletişimi gibi daha büyük Vue.js kavramlarına bağlar.
Sonraki adımlar olarak, küresel durum yönetimi için Vuex veya Pinia, daha karmaşık mantık için Composition API ve tembel yükleme ve memoization gibi performans optimizasyon tekniklerini derinlemesine incelemenizi öneririm. Pratik projelerde, reaktif sistemi formlarda, gerçek zamanlı güncellemelerde ve veri görselleştirmede uygulayın.
Ek kaynaklar arasında reaktivite hakkında resmi Vue.js belgeleri, Vue Mastery kursları ve GitHub'da Vue.js kaynak kodu analizi bulunur. Pano veya e-ticaret uygulamaları gibi karmaşık reaktif veri akışları gerektiren kendi projelerinizle pratik yapın.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek