Vue Academy · Ders

Reaktivitenin Temelleri

Vue'nun reaktif bağımlılıkları nasıl izlediğini öğrenin.

1. ders / 313 adım

Reaktivitenin Temelleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Tepkisellik Nedir?

Tepkisellik, verileriniz değiştiğinde Vue'nun DOM'u otomatik olarak güncellemesidir.

JavaScript'te bir değeri değiştirirsiniz
Vue değişikliği algılar
Görünüm, değişikliği yansıtacak şekilde yeniden oluşturulur

Elle DOM değiştirme gerekmez.

Vue Bağımlılıkları Nasıl İzler?

Vue, bir bağımlılık izleme sistemi kullanır.

Bir oluşturma işlemi reaktif bir değeri okuduğunda Vue bu bağımlılığı kaydeder
Bu değer daha sonra değiştiğinde Vue hangi oluşturma işlemlerini yeniden çalıştıracağını bilir
Bu, güncellemeleri hassas ve verimli hâle getirir

Temel Değerler için ref

Composition API'de ref, tek bir değeri reaktif hâle getirir.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

Şablonlarda ref

Şablonlarda ref'lerin içindeki değerler otomatik olarak açılır; bu nedenle .value yazmanız gerekmez.

<script setup>
import { ref } from "vue"
const count = ref(0)
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

Nesneler için reactive

reactive, nesnenin tamamını reaktif hâle getirir. Özelliklere doğrudan erişirsiniz; .value gerekmez.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref ve reactive Karşılaştırması

Aralarında seçim yaparken:

ref her değerle (temel değerler ve nesneler) çalışır; .value ile erişilir
reactive yalnızca nesneler içindir; doğrudan erişilir

Birçok ekip tutarlılık için her yerde ref kullanmayı tercih eder.

data Seçeneği (Vue 2 / Seçenekler API'si)

Seçenekler API'si data işlevini kullanır. Döndürülen her özellik reaktiftir.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

Dizilerde Tepkisellik Konusundaki Sınırlamalar

Doğrudan dizi dizini ataması özellikle Vue 2'de sorun çıkarabilir.

Vue 2'de arr[5] = x ataması güncellemeleri tetiklemezdi
Vue 3 proxy'leri çoğu durumu yönetir; yine de dikkatli olmak gerekir

Açıklık ve güvenlik için dizi yöntemlerini tercih edin.

Reaktif Dizi Yöntemleri

push, splice ve pop gibi değiştirme yöntemleri reaktif olarak izlenir.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Değiştirme ve Değiştirme İşlemi Yapma

Dizileri güncellemenin iki yolu vardır:

push, splice ve sort ile değiştirin
Örneğin filter veya map ile yeni bir dizi atayarak yenisiyle değiştirin

Vue 3'te her iki yöntem de tepkiselliği tetikler. Türetilmiş listeler için yenisiyle değiştirmek genellikle daha temizdir.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

Kaybolan Tepkiselliği Önleme

Reaktif bir nesneyi yapısına ayırmak, bu değişkenlerin tepkiselliğini bozar.

Bir özelliği dışarı almak, o anki değerinin kopyasını oluşturur
Yapısına ayırırken tepkiselliği korumak için toRefs kullanın

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Hızlı Kontrol

Vue tepkiselliği hakkındaki anlayışınızı sınayın.

İnteraktif derste cevapla

Özet: Tepkisellik Temelleri

Vue tepkiselliğinin nasıl çalıştığını öğrendiniz:

Vue, her oluşturma işleminin hangi verileri kullandığını izler
ref değerleri reaktif hâle getirir (JS içinde .value kullanın)
reactive nesneleri reaktif hâle getirir (doğrudan erişim)
Seçenekler API'si data işlevini kullanır
Tepkiselliği kaybetmemek için dizi yöntemlerini ve toRefs'i kullanın

Sırada: hesaplanan özellikler.

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

“Reaktivitenin Temelleri” dersi ücretsiz mi?

Evet — “Reaktivitenin Temelleri” 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 3 dersten oluşur.

“Reaktivitenin Temelleri” dersinde ne öğreneceğim?

Vue'nun reaktif bağımlılıkları nasıl izlediğini öğrenin. 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, 3 dersinin 1. dersidir.

“Reaktivitenin Temelleri” 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

← Vue Academy Sayfasına Dön