Vue.js Yaşam Döngüsü (Lifecycle Hooks): Kodunuz Ne Zaman Çalışmalı?

Bu Rehberde Ne Öğreneceksiniz?

Bu rehber Vue.js bileşenlerinin yaşam döngüsünü açıklar.
Kodunuzun ne zaman ve neden çalıştığını netleştirir.
Yanlış hook kullanımından kaynaklanan hataları önlersiniz.

---

Teknik Özet

• Konu: Vue.js Lifecycle Hooks
• Problem: Kodun yanlış zamanda çalışması
• Çözüm: Doğru hook’u doğru yerde kullanmak
• Evreler: Oluşturma → Yerleştirme → Güncelleme → Yok Etme

---

Lifecycle Hooks Nedir?

Lifecycle hooks, bileşenin yaşam evrelerini temsil eder.
Her evrede çalışan özel fonksiyonlar vardır.
Bu sayede Vue’nun iç işleyişini kontrol edersiniz.

---

1️⃣ Oluşturma Kancaları (Initialization)

Bu kancalar DOM oluşmadan önce çalışır.
SSR (Nuxt.js) sırasında çalışan tek aşamadır.
this.$el erişimi yoktur.

beforeCreate

export default {
  beforeCreate() {
    console.log('Bileşen başlatılıyor.')
  }
}

• Reaktif veri henüz hazır değildir.

---

created

export default {
  data() {
    return { mesaj: 'Merhaba' }
  },
  created() {
    this.mesaj = 'Güncellendi'
  }
}

• API istekleri için en uygun aşamadır.

---

2️⃣ Yerleştirme Kancaları (DOM Insertion)

1. Bu kancalar ilk render öncesi ve sonrası çalışır.
2. SSR ortamında çalışmaz.

beforeMount

export default {
  beforeMount() {
    console.log('DOM henüz oluşturulmadı.')
  }
}

• HTML ekrana basılmadan önceki son adımdır.

---

mounted

export default {
  mounted() {
    console.log(this.$el.textContent)
  }
}

• DOM manipülasyonu için en doğru aşamadır.

---

3️⃣ Güncelleme Kancaları (Re-render)

1. Reaktif veri değiştiğinde tetiklenir.
2. Debug ve performans ölçümü için kullanılır.

⚠️ İpucu:

1. Veri izlemek için watch veya computed tercih edin.

beforeUpdate

export default {
  beforeUpdate() {
    console.log('DOM henüz güncellenmedi.')
  }
}

• Yeni veri var, ekran eski.

---

updated

export default {
  updated() {
    console.log('DOM güncellendi.')
  }
}

• Ekran artık yeni veriyi yansıtır.

⚠️ Dikkat:

updated içinde state değiştirmek sonsuz döngü yaratabilir.

---

4️⃣ Yok Etme Kancaları (Teardown)

1. Bileşen kaldırılırken çalışır.
2. Bellek sızıntılarını önlemek için kritiktir.

---

beforeDestroy

export default {
  beforeDestroy() {
    console.log('Temizlik başlıyor.')
  }
}

• Event ve timer’ları burada temizleyin.

---

destroyed

export default {
  destroyed() {
    console.log('Bileşen tamamen silindi.')
  }
}

• Analitik veya log işlemleri için uygundur.

---

❓ Sıkça Sorulan Sorular

1. API isteği nerede yapılmalı? → created

2. DOM ölçümü nerede yapılmalı? → mounted

3. SSR’da hangi hook’lar çalışır? → beforeCreate, created

4. updated içinde state değiştirebilir miyim? → Önerilmez, sonsuz döngü oluşabilir.

---

Sonuç

Lifecycle hooks’u doğru kullanmak performansı artırır. Hataları azaltır, kodu öngörülebilir yapar.

Vue.js projelerinizi Rabisu Bulut altyapısında yayınlayarak maksimum performans elde edebilirsiniz.