Vue Academy · Ders

onUpdated ve onBeforeUpdate

Reaktif veri değişikliklerine tepki verme, onUpdated içinde sonsuz güncelleme döngülerinden kaçınma.

onUpdated ve onBeforeUpdate, 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.

Güncellemeler Sırasındaki Kancalar

Reaktif veriler değiştiğinde Vue bileşeni yeniden işler. İki kanca bu süreci sınırlar: onBeforeUpdate, DOM'a yama uygulanmadan önce çalışır; onUpdated ise sonrasında çalışır.

onUpdated: Yamadan Sonra

onUpdated, DOM yeni reaktif durumu yansıtacak şekilde güncellendikten sonra çalışır. Bu noktada işlenmiş DOM verilerinizle eşleşir.

<script setup>
import { onUpdated } from 'vue'
onUpdated(() => {
  console.log('DOM is now up to date')
})
</script>

Güncellenmiş DOM'u Okuma

Yama tamamlandığı için onUpdated, en son işlemeye bağlı yeni öğe boyutlarını veya konumlarını okumak için doğru yerdir.

<script setup>
import { ref, onUpdated } from 'vue'
const list = ref(null)
onUpdated(() => {
  console.log(list.value.scrollHeight)
})
</script>

Sonsuz Döngü Tuzağı

onUpdated içinde reaktif durumu asla değiştirmeyin. Bunu yapmak başka bir işlemeyi tetikler; bu işlem onUpdated kancasını yeniden çalıştırır, o da durumu tekrar değiştirir — uygulamayı donduran sonsuz bir döngü oluşur.

<script setup>
import { ref, onUpdated } from 'vue'
const count = ref(0)
onUpdated(() => {
  count.value++ // BAD: infinite update loop
})
</script>

Bunun Yerine watch Kullanın

Belirli bir değerin değişimine tepki vermek istiyorsanız watch kullanın, onUpdated kullanmayın. Bir watch tek bir kaynağı hedefler ve döngü riskini önler; onUpdated ise her işleme için çalışır.

watch(count, (newVal) => {
  console.log('count became', newVal)
})

onBeforeUpdate: Yamadan Önce

onBeforeUpdate, reaktif bir değişiklikten sonra ancak Vue DOM'a yama uygulamadan önce çalışır. DOM burada hâlâ eski değerleri gösterir.

<script setup>
import { onBeforeUpdate } from 'vue'
onBeforeUpdate(() => {
  console.log('DOM still has old values')
})
</script>

Kullanım Alanı: Güncelleme Öncesi Anlık Görüntü

onBeforeUpdate eski DOM'u gördüğü için değişiklikten önce anlık görüntü almak için idealdir; örneğin, güncellemeden sonra geri yüklemek üzere geçerli kaydırma konumunu kaydedebilirsiniz.

<script setup>
import { ref, onBeforeUpdate, onUpdated } from 'vue'
const el = ref(null)
let savedScroll = 0
onBeforeUpdate(() => { savedScroll = el.value.scrollTop })
onUpdated(() => { el.value.scrollTop = savedScroll })
</script>

Her İşlemede Çalışırlar

Her iki kanca da her güncelleme döngüsünde çalışır ve bu sık gerçekleşebilir. Performans sorunlarını önlemek için geri çağırımlarını hafif tutun.

Veri Yan Etkileri İçin Kullanmayın

Bu kancalar verilerinizle değil, DOM ile ilgilidir. Veriye dayalı tepkiler için computed (türetilmiş değerler) veya watch (belirli kaynaklardaki yan etkiler) kullanmayı tercih edin.

Sıra Özeti

Reaktif bir değişiklikte sıra şöyledir: durum değişir, onBeforeUpdate çalışır (eski DOM), Vue DOM'a yama uygular, ardından onUpdated çalışır (yeni DOM).

Aralarında Seçim Yapma

onBeforeUpdate: kaydırma veya seçim gibi eski DOM durumunu yakalar.
onUpdated: yamadan sonra yeni DOM'u okur; ancak burada reaktif durumu asla değiştirmeyin.

Hızlı Kontrol

Güncelleme kancaları hakkındaki bilginizi sınayın.

Özet

Güncelleme kancalarının özeti:

onUpdated, DOM yamasından sonra çalışır; yeni boyutları burada okuyun.
İçinde reaktif durumu asla değiştirmeyin (sonsuz döngü oluşur); bunun yerine watch kullanın.
onBeforeUpdate, yamadan önce eski DOM ile çalışır; anlık görüntüler için idealdir.
Her ikisi de her işlemede çalışır; bu nedenle işlemlerini hafif tutun.

Sıkça Sorulan Sorular

“onUpdated ve onBeforeUpdate” dersi ücretsiz mi?

Evet — “onUpdated ve onBeforeUpdate” 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.

“onUpdated ve onBeforeUpdate” dersinde ne öğreneceğim?

Reaktif veri değişikliklerine tepki verme, onUpdated içinde sonsuz güncelleme döngülerinden kaçınma. 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.

“onUpdated ve onBeforeUpdate” 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