0Pricing
Vue Academy · Ders

İzleyiciler ve Derin Reaktivite

İzleyiciler ve derin izleme ile veri değişikliklerine tepki verin.

İzleyiciler ve Derin Reaktivite, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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 3 dersten oluşur.

Gözlemci Nedir?

Gözlemci, veriler değiştiğinde bir işlevi çalıştırır.

  • computed özelliğinden farklı olarak yan etkiler için kullanılır
  • Veri getirme, günlük kaydı tutma ve depolamaya kaydetme
  • Belirli bir şey değiştiğinde tepki verirsiniz

watch İşlevi

watch işlevi, izlenecek bir kaynak ve yeni ve eski değerleri alan bir geri çağırma işlevi alır.

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

Uygulamalı Bir Örnek

Değiştiğinde bir API çağrısını tetiklemek için bir arama girdisini izleme.

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

immediate Seçeneği

Varsayılan olarak gözlemci yalnızca değişikliklerde çalışır. immediate seçeneği, gözlemciyi hemen bir kez de çalıştırır.

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

deep Seçeneği

Bir nesneyi izlemek, varsayılan olarak yalnızca başvuru değişikliklerinde çalışır. deep seçeneği, iç içe özellikleri de izler.

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

İç İçe Nesneleri İzleme

deep kullanılmadığında, izlenen reaktif bir nesnenin iç içe bir özelliğini değiştirmek geri çağırma işlevini beklendiği gibi tetiklemeyebilir. deep seçeneği, daha fazla işlem maliyeti karşılığında bunun gerçekleşmesini sağlar.

  • deep seçeneğini yalnızca iç içe izlemeye gerçekten ihtiyaç duyduğunuzda kullanın
  • Büyük nesneleri deep ile izlemek maliyetli olabilir

Bir Getter'ı İzleme

Belirli bir iç içe değeri izlemek için kaynak olarak bir getter işlevi geçirin.

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

Birden Çok Kaynağı İzleme

Aynı anda birden fazla değeri izlemek için kaynaklardan oluşan bir dizi geçirin.

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

watchEffect hemen çalışır ve okuduğu reaktif değerlerden herhangi biri değiştiğinde yeniden çalışır. Açıkça bir kaynak listesi belirtmeniz gerekmez.

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

watch ile watchEffect Karşılaştırması

İkisi arasında seçim yaparken:

  • watch açıkça belirtilen bir kaynağı izler, eski ve yeni değerleri sağlar ve varsayılan olarak tembel çalışır
  • watchEffect bağımlılıkları otomatik olarak izler, hemen çalışır ve eski değeri sağlamaz

Önceki değere veya hassas bir denetime ihtiyacınız olduğunda watch kullanın; kolaylık için watchEffect kullanın.

Options API'de Gözlemciler

Options API, gözlemcileri veri adıyla anahtarlanmış bir watch bloğunda tanımlar.

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

Hızlı Kontrol

Gözlemciler hakkındaki anlayışınızı sınayın.

Özet: Gözlemciler ve Derin Reaktivite

Yan etkilerle değişikliklere tepki vermeyi öğrendiniz:

  • watch bir kaynağı izler ve yeni ve eski değerleri sağlar
  • immediate başlangıçta bir kez çalıştırır
  • deep iç içe nesne değişikliklerini izler
  • watchEffect bağımlılıkları otomatik olarak izler ve hemen çalışır
  • Bir diziyle birden fazla kaynağı izleyin

Sırada: Vue Router ile yönlendirme.

Sıkça Sorulan Sorular

“İzleyiciler ve Derin Reaktivite” dersi ücretsiz mi?

Evet — “İzleyiciler ve Derin Reaktivite” 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.

“İzleyiciler ve Derin Reaktivite” dersinde ne öğreneceğim?

İzleyiciler ve derin izleme ile veri değişikliklerine tepki verin. 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 3. dersidir.

“İzleyiciler ve Derin Reaktivite” 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

  1. Reaktivitenin Temelleri
  2. Hesaplanmış Özellikler
  3. İzleyiciler ve Derin Reaktivite
← Vue Academy Sayfasına Dön