Vue.js Yaşam Döngüsü Kancaları

Vue.js yaşam döngüsü kancaları, bir Vue bileşeninin yaşam döngüsünün belirli aşamalarında kod çalıştırmanıza olanak tanıyan bir dizi yöntemdir. Bir bileşenin varoluşunun farklı noktalarına, oluşturmadan yok etmeye kadar erişmenin bir yolunu sağlarlar. Bu kancalar, verileri başlatma, olay dinleyicileri ayarlama ve kaynakları temizleme gibi görevleri gerçekleştirmek için önemlidir.

Bir Vue Bileşeninin Yaşam Döngüsü

Bir Vue bileşeninin yaşam döngüsü birkaç aşamaya ayrılabilir. Her aşama, kodu yürütmek için kullanabileceğiniz belirli yaşam döngüsü kancalarıyla ilişkilendirilir. İşte bir Vue bileşeninin yaşam döngüsünün ana aşamaları:

• Oluşturma: Bileşen başlatılıyor.
• Montaj: Bileşen DOM'a ekleniyor.
• Güncelleniyor: Bileşenin reaktif verileri değişiyor.
• Destruction: Bileşen DOM'dan kaldırılıyor.

Anahtar Yaşam Döngüsü Kancaları

Vue.js, bileşenlerinizde kullanabileceğiniz çeşitli yaşam döngüsü kancaları sağlar. Her kanca yaşam döngüsündeki belirli bir aşamaya karşılık gelir. En sık kullanılan kancalar şunlardır:

• created: Bileşen örneği oluşturulduktan sonra çağrılır. Veri almak veya bileşen durumunu başlatmak için iyi bir yerdir.
• mount: Bileşen DOM'a bağlandıktan sonra çağrılır. Burada DOM manipülasyonları gerçekleştirebilir veya asenkron işlemleri başlatabilirsiniz.
• güncellendi: Bileşenin reaktif verileri değiştikten ve DOM güncellendikten sonra çağrılır. Veri değişikliklerine tepki vermek için kullanışlıdır.
• destroy: Bileşen yok edilmeden önce çağrılır. Olay dinleyicileri veya zamanlayıcılar gibi kaynakları temizlemek için bu kancayı kullanın.

Yaşam Döngüsü Kancalarına Örnekler

Kanca Oluşturuldu

created kancası, bileşen örneği oluşturulduktan sonra ancak bağlanmadan önce eylemleri gerçekleştirmek için kullanılır. İşte created kancasının veri almak için kullanımına dair bir örnek:

<template>
  <div>
    <p>Data: {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await fetch('https://api.example.com/data');
      this.data = await response.json();
    }
  }
};
</script>

Monte edilmiş kanca

mounted kancası, bileşen DOM'a eklendikten sonra çağrılır. DOM manipülasyonlarını gerçekleştirmek veya bileşenin DOM'da olmasını gerektiren asenkron işlemleri başlatmak için idealdir. İşte bir örnek:

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.innerHTML = 'Component has been mounted!';
  }
};
</script>

Güncellenen Kanca

updated kancası, bileşenin reaktif verileri değiştikten ve DOM güncellendikten sonra çağrılır. Veri değişikliklerine tepki vermek için yararlıdır. İşte bir örnek:

<template>
  <div>
    <input v-model="text" placeholder="Type something"/>
    <p>Updated Text: {{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  updated() {
    console.log('Component updated with text:', this.text);
  }
};
</script>

Yıkılmış Kanca

destroyed kancası, bileşen yok edilmeden önce çağrılır. Bu kancayı, olay dinleyicilerini kaldırmak veya zamanlayıcıları durdurmak gibi temizleme işlemlerini gerçekleştirmek için kullanın. İşte bir örnek:

<template>
  <div>Check the console when this component is destroyed</div>
</template>

<script>
export default {
  destroyed() {
    console.log('Component is being destroyed');
  }
};
</script>

Çözüm

Vue.js yaşam döngüsü kancaları, bir bileşenin yaşam döngüsünün çeşitli aşamalarını yönetmek için olmazsa olmazdır. Bu kancaları anlayıp kullanarak, verileri etkili bir şekilde başlatabilir, DOM'u düzenleyebilir, güncellemeleri yönetebilir ve kaynakları temizleyebilirsiniz. Sağlam ve duyarlı uygulamalar oluşturmak için yaşam döngüsü kancalarını Vue.js bileşenlerinize dahil edin.