Vue Academy · Ders

onUnmounted ve Temizleme Kalıpları

onUnmounted içinde aralıkları temizleme, olay dinleyicilerini kaldırma, istekleri iptal etme.

onUnmounted ve Temizleme Kalıpları, 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.

Kendinizden Sonra Temizleme

Bir bileşen kaldırıldığında, başlattığı her şey — timer'lar, dinleyiciler, abonelikler ve ağ istekleri — siz durdurmadığınız sürece çalışmaya devam eder. onUnmounted kancası, bellek sızıntılarını ve hataları önlemek için temizleme işlemini yaptığınız yerdir.

onUnmounted Kancası

onUnmounted, bileşen DOM'dan kaldırıldıktan sonra çalışır. Kaynakları serbest bırakmak için son fırsattır.

<script setup>
import { onUnmounted } from 'vue'
onUnmounted(() => {
  console.log('component removed')
})
</script>

Kalıp: Aralıkları Temizleme

onMounted içinde bir aralık başlatırsanız onUnmounted içinde temizleyin. Aksi hâlde geri çağırım, bileşen ortadan kalktıktan sonra da çalışmaya devam eder ve çoğu zaman eksik durum nedeniyle uygulamanın çökmesine yol açar.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let id
onMounted(() => { id = setInterval(tick, 1000) })
onUnmounted(() => clearInterval(id))
</script>

Kalıp: Olay Dinleyicilerini Kaldırma

window veya document üzerindeki genel dinleyiciler, bileşen kaldırıldıktan sonra da varlığını sürdürür. addEventListener ile removeEventListener çağrılarını her zaman eşleştirin.

<script setup>
import { onMounted, onUnmounted } from 'vue'
function onResize() {}
onMounted(() => window.addEventListener('resize', onResize))
onUnmounted(() => window.removeEventListener('resize', onResize))
</script>

Kalıp: Veri Alma İsteklerini İptal Etme

Kaldırma işleminden sonra tamamlanan bekleyen bir istek, artık var olmayan bir bileşenin durumunu değiştirebilir. Temizleme sırasında isteği iptal etmek için AbortController kullanın.

<script setup>
import { onMounted, onUnmounted } from 'vue'
const controller = new AbortController()
onMounted(() => {
  fetch('/api/data', { signal: controller.signal })
})
onUnmounted(() => controller.abort())
</script>

Kalıp: Abonelikten Çıkma

Mağazalara, soketlere veya olay veri yollarına yapılan abonelikler sonlandırılmalıdır. Abonelikten çıkma işlevini saklayın ve onUnmounted içinde çağırın.

<script setup>
import { onMounted, onUnmounted } from 'vue'
let unsubscribe
onMounted(() => { unsubscribe = store.subscribe(handler) })
onUnmounted(() => unsubscribe && unsubscribe())
</script>

watch Bir Durdurma İşlevi Döndürür

watch çağrısı, onu durduran bir işlev döndürür. Kurulum sırasında oluşturulan izleyiciler otomatik olarak durur; ancak daha sonra, örneğin başka bir geri çağırımın içinde oluşturulan izleyiciler elle durdurulmalıdır.

<script setup>
import { watch, onUnmounted } from 'vue'
const stop = watch(source, handler)
onUnmounted(() => stop())
</script>

watchEffect Temizleme Geri Çağırımı

watchEffect içinde, bir sonraki çalıştırmadan önce veya stop sırasında temizleme yapmak üzere bir onCleanup işlevi alırsınız. Bu, her çalıştırmaya ait kaynakları düzenli tutar.

watchEffect((onCleanup) => {
  const timer = setTimeout(doWork, 500)
  onCleanup(() => clearTimeout(timer))
})

Temizleme Neden Önemlidir

Temizlemeyi atlamak bellek sızıntılarına (kaynaklar hiç serbest bırakılmaz), yinelenen dinleyicilere (birden çok monte etme işlemi üst üste eklenir) ve hatalara (geri çağırımlar yok edilmiş duruma erişir) yol açar. Temiz kod, kurduğu her şeyi her zaman kaldırır.

Bileşim İşlevleri Bunu Otomatikleştirir

İyi yazılmış bileşim işlevleri kendi temizleme işlemlerini onUnmounted içinde kaydeder. Bu nedenle useEventListener gibi VueUse bileşim işlevleri dinleyiciyi sizin için kaldırır; temizleme işlemi yerleşik olarak bulunur.

Temizleme Kontrol Listesi

setInterval/setTimeout -> temizleyin.
addEventListener -> kaldırın.
fetch -> AbortController ile abort edin.
abonelikler -> unsubscribe çağırın.
elle oluşturulan izleyiciler -> döndürülen stop işlevini çağırın.

Hızlı Kontrol

Temizleme hakkındaki bilginizi sınayın.

Özet

Temizlemenin temel noktaları:

onUnmounted, kaldırma işleminden sonra çalışır; kaynakları burada serbest bırakın.
Aralıkları ve zaman aşımını temizleyin, dinleyicileri kaldırın, veri alma isteklerini iptal edin ve aboneliklerden çıkın.
watch, gerektiğinde onUnmounted içinde çağırabileceğiniz bir stop işlevi döndürür.
watchEffect, her çalıştırmaya özgü temizleme için bir onCleanup geri çağırımı sağlar.

Sıkça Sorulan Sorular

“onUnmounted ve Temizleme Kalıpları” dersi ücretsiz mi?

Evet — “onUnmounted ve Temizleme Kalıpları” 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.

“onUnmounted ve Temizleme Kalıpları” dersinde ne öğreneceğim?

onUnmounted içinde aralıkları temizleme, olay dinleyicilerini kaldırma, istekleri iptal etme. 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.

“onUnmounted ve Temizleme Kalıpları” 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