Vue Academy · Ders

ref ve reactive: Hangisi Ne Zaman Kullanılır?

ref.value erişimi, şablonlarda reactive açma, parçalama için toRefs(), toRef().

3. ders / 413 adım

ref ve reactive: Hangisi Ne Zaman Kullanılır?, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

İki Reaktivite Aracı

Vue, reaktif state oluşturmak için iki ana yol sunar: ref() ve reactive(). Birbirleriyle örtüşürler, ancak her biri belirli durumlara daha uygundur. Hangisine ne zaman başvuracağınızı bilmek, kodunuzu temiz tutar.

ref Her Türlü Değerle Çalışır

ref() her şeyi sarabilir: sayı, dize, boolean, dizi veya nesne. Değer, JavaScript'te .value üzerinde bulunur.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref Şablonlarda Sarmalamayı Otomatik Olarak Kaldırır

JavaScript'te .value yazmanız gerekirken şablon, üst düzey bir ref'in sarmalamasını otomatik olarak kaldırır. Bu nedenle {{ count }} doğrudan çalışır.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive Nesneler İçindir

reactive() yalnızca nesneleri kabul eder (diziler ve eşlemeler de buna dahildir). Derinlemesine reaktif bir vekil döndürür ve özelliklerine doğrudan erişirsiniz; .value yoktur.

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive Derinlemesine Reaktiftir

Bir reactive nesnesinin içindeki iç içe nesneler ve diziler de reaktiftir. İç içe bir özelliği değiştirmek, ek bir işlem yapmadan güncellemeleri tetikler.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

reactive Sınırlaması: Parçalarına Ayırma Reaktiviteyi Bozar

Bir reactive nesnesini parçalarına ayırırsanız, çıkarılan değişkenler yalın değerlere dönüşür ve reaktivitelerini kaybeder. En sık karşılaşılan tuzak budur.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

Çözüm: Güvenli Parçalarına Ayırma için toRefs

toRefs(), reaktif bir nesnenin her özelliğini bir ref'e dönüştürür. Artık reaktiviteyi koruyarak nesneyi parçalarına ayırabilirsiniz; çünkü her parça kaynak nesneye bağlı bir ref'tir.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

Tek Bir Özellik için toRef

Yalnızca bir özelliğe ref olarak ihtiyacınız varsa toRef(state, 'key') kullanın. Kaynak nesneyle iki yönlü olarak eşzamanlı kalır.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

Pratik Bir Genel Kural

İlkel değerler (sayılar, dizeler, boolean değerler) ve bağımsız değerler için ref() kullanın.
Tek bir nesne oluşturan, birbiriyle ilişkili özellikler grubu için reactive() kullanın.
Bir birleştirilebilir işlevden reaktif bir nesne döndürürken nesneyi toRefs() ile sarın.

ref Nesneleri de Tutabilir

Nesneler için reactive kullanmayı seçmek zorunda değilsiniz. Nesne tutan bir ref de derinlemesine reaktiftir; yalnızca ona .value üzerinden erişirsiniz. Birçok ekip tutarlılık için her yerde ref kullanır.

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

Özet Tablosu

ref: her türlü değer, JS içinde .value gerektirir, şablonda sarmalamayı otomatik olarak kaldırır ve bütünüyle yeniden atanabilir.
reactive: yalnızca nesneler, .value yoktur, derinlemesine reaktiftir; ancak nesneyi parçalarına ayırınca bozulur ve yeniden atanamaz.
toRefs: reaktif özellikleri parçalarına ayrılabilir hale getiren köprüdür.

Hızlı Kontrol

Doğru aracı seçin.

İnteraktif derste cevapla

Özet

Temel çıkarımlar:

ref() her türlü değeri sarar ve JavaScript'te .value gerektirir.
reactive() nesneler içindir ve derinlemesine reaktiftir, ancak parçalarına ayırmak onu bozar.
toRefs(), reaktif bir nesneyi güvenle parçalara ayırmanızı sağlar.
İlkel değerler için ref, gruplandırılmış nesne state'i için reactive kullanın.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“ref ve reactive: Hangisi Ne Zaman Kullanılır?” dersi ücretsiz mi?

Evet — “ref ve reactive: Hangisi Ne Zaman Kullanılır?” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“ref ve reactive: Hangisi Ne Zaman Kullanılır?” dersinde ne öğreneceğim?

ref.value erişimi, şablonlarda reactive açma, parçalama için toRefs(), toRef(). Vue 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.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue 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 3. dersidir.

“ref ve reactive: Hangisi Ne Zaman Kullanılır?” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

Composition API Neden Kullanılır?
setup() İşlevi ve Reaktif Değişkenler
ref ve reactive: Hangisi Ne Zaman Kullanılır?
Composition API'de Computed ve Watch

← Vue Academy Sayfasına Dön