ref() ve reactive()
ref() ile tepkisel ilkel değerler oluşturun, nesneleri reactive() ile sarın ve her birini ne zaman kullanacağınızı, ref değerlerine .value üzerinden nasıl erişeceğinizi öğrenin.
ref() ve reactive(), CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Vue 3'te Reaktivite
Vue 3'ün Composition API'si, durumu izlemek için reaktif ilkel değerleri kullanır. İki temel işlev vardır: ilkel değerler için ref() ve nesneler için reactive(). Bunlardaki değişiklikler kullanıcı arayüzünü otomatik olarak günceller.
İlkel Değerler için ref()
ref(value), bir değeri reaktif bir kapsayıcıya sarar. Betikte değere .value aracılığıyla erişin ve değeri değiştirin. Şablonlarda Vue, ref'lerin sarmalamasını otomatik olarak kaldırır; .value kullanmanız gerekmez.
<script setup>
import { ref } from 'vue';
const count = ref(0);
const name = ref('Alice');
function increment() {
count.value++; // .value in script
}
</script>
<template>
<p>{{ count }}</p> <!-- no .value in template -->
<button @click="increment">+</button>
</template>Nesneler için reactive()
reactive(object), nesnenin derinlemesine reaktif bir vekilini döndürür. Özelliklere doğrudan erişirsiniz; hiçbir yerde .value kullanmanız gerekmez.
<script setup>
import { reactive } from 'vue';
const form = reactive({
email: '',
password: '',
rememberMe: false
});
// Mutate directly:
form.email = 'user@example.com';
</script>
<template>
<input v-model="form.email">
</template>ref ve reactive — Hangisini Ne Zaman Kullanmalı?
ref() kullanın: ilkel değerler (string, number, boolean), boş değer alabilen değerler ve birleştirilebilirlerden döndürülen değerler için (yapılarını ayırmak daha kolaydır). reactive() kullanın: tek bir nesnede birlikte yer alan ilişkili veriler için.
reactive() Yapısını Ayırmanın Sakıncası
Reaktif bir nesnenin yapısını ayırmak reaktiviteyi kaybettirir; çünkü çıkarılan özellikler reaktif ref'ler değil, normal değerlerdir.
const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking
// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;toRef ve toRefs
toRef(obj, 'key'), tek bir özelliğe bağlı bir ref oluşturur. toRefs(obj), reaktif bir nesnenin tüm özelliklerini ayrı ayrı bağlı ref'lere dönüştürür; bu nedenle yapıyı ayırmak güvenlidir.
import { toRefs } from 'vue';
const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'DOM Öğeleri için ref()
Bir DOM öğesine veya alt bileşen örneğine reaktif bir başvuru almak için şablonda eşleşen bir ref özniteliğiyle birlikte ref(null) kullanın.
<script setup>
import { ref, onMounted } from 'vue';
const inputEl = ref<HTMLInputElement | null>(null);
onMounted(() => {
inputEl.value?.focus(); // now the DOM element is available
});
</script>
<template>
<input ref="inputEl" type="text">
</template>isRef ve unref
isRef(val), bir değerin ref olup olmadığını denetler. unref(val), bir ref'in sarmalamasını kaldırır; değer ref değilse olduğu gibi döndürür. Her iki ref'i ve normal değerleri kabul eden birleştirilebilirlerde kullanışlıdır.
import { isRef, unref } from 'vue';
function double(val: Ref<number> | number) {
return unref(val) * 2; // works with both ref and plain number
}shallowRef ve shallowReactive
shallowRef() yalnızca en üst düzeyde reaktiftir, derinlemesine reaktif değildir. shallowReactive() de nesneler için aynı şekilde çalışır. Derin reaktivite gerekmediğinde, örneğin büyük ve değişmez veri yapılarında, performansı iyileştirmek için kullanın.
reactive() ile Değiştirme Arasındaki Fark
reactive() kullanırken özellikleri doğrudan değiştirin. Nesnenin tamamını değiştiremezsiniz; reactive() aynı başvuruya ihtiyaç duyar. Değiştirme işlemi için ref() kullanın; ref() ile ref.value = newObject atamasına izin verilir.
const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem]; // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassignDerinlemesine Reaktivite
reactive(), varsayılan olarak derinlemesine reaktiftir; Vue, iç içe nesnelerde ve dizilerdeki değişiklikleri izler. Bu kullanım kolaylığı sağlar ancak çok büyük nesnelerde maliyetli olabilir. Performansın önemli olduğu durumlarda shallowReactive kullanmayı değerlendirin.
Hızlı Kontrol
reactive() nesnesinin yapısını ayırmak neden reaktiviteyi kaybettirir?
ref() ve reactive() Özeti
ref(), ilkel değerleri sarar; betikte .value aracılığıyla erişilir, şablonlarda sarmalaması otomatik olarak kaldırılır. reactive(), nesneleri derinlemesine reaktif hâle getirir; özellikleri doğrudan değiştirin. Yapıyı ayırmak reaktiviteyi kaybettirir; toRefs() kullanın. Şablon öğesi ref'leri için ref(null) kullanın. Performans için shallowRef/shallowReactive kullanın. Birleştirilebilir yardımcıları için isRef/unref kullanın.
Sıkça Sorulan Sorular
“ref() ve reactive()” dersi ücretsiz mi?
Evet — “ref() ve reactive()” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“ref() ve reactive()” dersinde ne öğreneceğim?
ref() ile tepkisel ilkel değerler oluşturun, nesneleri reactive() ile sarın ve her birini ne zaman kullanacağınızı, ref değerlerine .value üzerinden nasıl erişeceğinizi öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“ref() ve reactive()” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- ref() ve reactive()
- computed() ve watch()
- setup() İşlevi ve script setup
- Composables: Yeniden Kullanılabilir Composition İşlevleri