0Pricing
Vue Academy · Ders

Composition API'de Computed ve Watch

Türetilmiş durum için computed(), yan etkiler için watch() ve watchEffect().

Composition API'de Computed ve Watch, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. 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.

State ile Türetme ve Değişikliklere Tepki Verme

Reaktif state hikâyenin yalnızca yarısıdır. Ayrıca ondan yeni değerler türetmeniz ve değişikliklere tepki vermeniz gerekir. Bileşim API'si bunun için computed, watch ve watchEffect sunar.

Türetilmiş Değerler için computed

computed(), bir değer alma işlevi alır ve değerini başka bir reaktif state'ten türeten bir ref döndürür. JS içinde ona .value ile erişilir; şablonda ise sarmalaması otomatik olarak kaldırılır.

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed Tembel ve Önbelleklidir

Bir computed yalnızca reaktif bağımlılıklarından biri değiştiğinde yeniden hesaplanır. Değişiklik olmadan onu on kez okursanız değer alma işlevi bir kez çalışır ve önbelleğe alınmış sonuç yeniden kullanılır.

Bu, computed'ı maliyetli türetmeler için ideal kılar.

computed Otomatik Olarak Güncellenir

Bir bağımlılığı değiştirin; computed bir sonraki okunışında güncellenir. Onu hiçbir zaman elle çağırmazsınız.

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

Yan Etkiler için watch

watch(), reaktif bir kaynağı izler ve kaynak değiştiğinde bir geri çağırma işlevi çalıştırır. Geri çağırma işlevi yeni değeri ve eski değeri alır.

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch Varsayılan Olarak Tembeldir

computed'dan farklı olarak watch, geri çağırma işlevini hemen çalıştırmaz. İlk değişikliği bekler. Onu yan etkiler için kullanın: günlük kaydı tutma, veri alma ve depolamaya kaydetme.

Birden Çok Kaynağı İzleme

Aynı anda birden çok değeri izlemek için watch'a bir kaynak dizisi verin. Geri çağırma işlevi yeni ve eski değerlerden oluşan dizileri alır.

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

Değer Alma İşlevini İzleme

Reaktif bir nesnenin bir özelliğini izlemek için bir değer alma işlevi verin. Nesneyi doğrudan izlemek yalnızca derin değişikliklerde çalışır; bu şaşırtıcı olabilir.

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: Hevesli ve Otomatik İzleme

watchEffect(), işlevini hemen çalıştırır ve içinde kullanılan herhangi bir reaktif değer değiştiğinde yeniden çalıştırır. Bağımlılıkları listelemezsiniz; bunlar otomatik olarak izlenir.

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

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

  • watch: açık kaynak, tembel çalışır, eski ve yeni değerleri verir.
  • watchEffect: bağımlılıkları otomatik izler, hevesli çalışır, eski değere erişim sunmaz.

Önceki değere ihtiyaç duyduğunuzda veya kesin denetim istediğinizde watch kullanın. Hızlı reaktif yan etkiler için watchEffect kullanın.

computed ve watch karşılaştırması

Yeni bir türetilmiş değer elde etmek istediğinizde computed kullanın. Bir değişikliğe yanıt olarak bir işlem gerçekleştirmek istediğinizde watch veya watchEffect kullanın. Bir değeri yeniden hesaplamak için watch kullanmayın; bunun için computed vardır.

Hızlı Kontrol

Doğru reaktif yardımcıyı seçin.

Özet

Artık değerleri nasıl türeteceğinizi ve değişikliklere nasıl tepki vereceğinizi biliyorsunuz:

  • computed, tembelce hesaplanan ve önbelleğe alınan türetilmiş değerler oluşturur.
  • watch, belirli bir kaynağa tepki verir ve yeni ile eski değerleri sağlar; tembelce çalışır.
  • watchEffect, hemen çalışır ve bağımlılıkları otomatik olarak izler.
  • Değerler için computed, yan etkiler için watch/watchEffect kullanın.

Sıkça Sorulan Sorular

“Composition API'de Computed ve Watch” dersi ücretsiz mi?

Evet — “Composition API'de Computed ve Watch” 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.

“Composition API'de Computed ve Watch” dersinde ne öğreneceğim?

Türetilmiş durum için computed(), yan etkiler için watch() ve watchEffect(). 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 4. dersidir.

“Composition API'de Computed ve Watch” 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. Composition API Neden Kullanılır?
  2. setup() İşlevi ve Reaktif Değişkenler
  3. ref ve reactive: Hangisi Ne Zaman Kullanılır?
  4. Composition API'de Computed ve Watch
← Vue Academy Sayfasına Dön