0Pricing
Frontend Academy · Ders

computed() ve watch()

computed() ile değerleri tembel biçimde türetin, watch() ve watchEffect() ile durum değişikliklerine tepki verin ve temizleme zamanlamasını denetleyin.

computed() ve watch(), CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. 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.

Composition API'de computed()

computed(fn), değerini diğer reaktif kaynaklardan türeten salt okunur bir reaktif ref oluşturur. Önbelleğe alınır; alıcı işlev yalnızca bağımlılıklar değiştiğinde çalışır.

<script setup>
import { ref, computed } from 'vue';

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

Yazılabilir computed()

Yazılabilir bir computed oluşturmak için get ve set içeren bir nesne aktarın. Setter, güncellemeleri yönetir ve genellikle değişikliği kaynak ref'e geri yansıtır.

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

watch() Temelleri

watch(source, callback), kaynak değiştiğinde geri çağırma işlevini çalıştırır. Geri çağırma işlevi yeni ve eski değerleri alır.

import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log(`Changed from '${oldVal}' to '${newVal}'`);
  searchAPI(newVal);
});

ref ve reactive İzleme

Bir ref'i doğrudan izleyin. Reaktif bir özelliği izlemek için alıcı işlevi () => state.prop kullanın.

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

Derin İzleme

Bir nesne ref'indeki iç içe değişiklikleri izlemek için { deep: true } aktarın.

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

Anında İzleme

Geri çağırma işlevini kurulum sırasında, herhangi bir değişiklikten önce hemen çalıştırmak için { immediate: true } aktarın. Bir yan etkiyi başlangıç değeriyle çalıştırmak istediğinizde kullanışlıdır.

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn), geri çağırma işlevini hemen çalıştırır ve içinde kullanılan herhangi bir reaktif bağımlılık değiştiğinde yeniden çalıştırır. Kaynakları açıkça belirtmeniz gerekmez.

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffect ve watch

watchEffect: hemen çalışır, bağımlılıkları otomatik olarak izler ve eski değere erişim sağlamaz. watch: kaynaklar açıkça belirtilir, varsayılan olarak gecikmeli çalışır ve eski ve yeni değerlere erişim sağlar. Bildirimsel yan etkiler için watchEffect; ne zaman ve ne sıklıkta çalışacağı üzerinde denetim gerektiğinde watch kullanın.

İzleyicileri Durdurma

watch ve watchEffect, bir stop işlevi döndürür. İzlemeyi durdurmak için bu işlevi çağırın.