🔄 Lifecycle Hooks di Vue.js

Lifecycle Hooks adalah metode bawaan yang disediakan oleh Vue.js yang memungkinkan kamu menyisipkan logika di berbagai tahap kehidupan komponen: mulai dari pembuatan, render, update, hingga penghancuran.

---

🧭 1. Tahapan Umum Lifecycle

Create → Mount → Update → Destroy

Tahapan ini memberi kamu kontrol untuk:

• Menjalankan kode saat komponen dibuat
• Mengakses DOM saat sudah dirender
• Membersihkan data saat komponen dihancurkan

---

📦 2. Lifecycle Hooks Utama

Hook	Kapan Dipanggil	Umumnya Digunakan Untuk
beforeCreate	Sebelum instance dibuat	Setup awal, debugging
created	Setelah data & reaktivitas di-inisialisasi	Fetch data API, inisialisasi state
beforeMount	Sebelum render pertama ke DOM	Persiapan visual/DOM
mounted	Setelah render pertama selesai	Manipulasi DOM, akses $refs, plugin
beforeUpdate	Sebelum data berubah dan re-render	Logging, validasi data lama
updated	Setelah komponen re-render	Debugging, efek UI
beforeDestroy	Sebelum komponen dihancurkan	Cleanup timer, event listener
destroyed	Setelah dihancurkan	Final cleanup

---

🧪 3. Contoh Penggunaan

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Lifecycle Vue'
    };
  },
  created() {
    console.log('Komponen dibuat');
  },
  mounted() {
    console.log('Komponen dirender ke DOM');
  },
  updated() {
    console.log('Data atau DOM diperbarui');
  },
  destroyed() {
    console.log('Komponen dihancurkan');
  }
}
</script>

---

📌 4. Kapan Menggunakan Setiap Hook?

Kebutuhan Hook yang Cocok Inisialisasi data, fetch API created atau mounted Akses elemen DOM ($refs) mounted Cleanup interval, event listener beforeDestroy / destroyed Menyimpan data lokal sebelum update beforeUpdate

Kebutuhan	Hook yang Cocok
Inisialisasi data, fetch API	created atau mounted
Akses elemen DOM ($refs)	mounted
Cleanup interval, event listener	beforeDestroy / destroyed
Menyimpan data lokal sebelum update	beforeUpdate

---

🆕 5. Vue 3: Lifecycle dengan Composition API

Jika kamu menggunakan Vue 3 + Composition API:

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Komponen dimount');
    });

    onUnmounted(() => {
      console.log('Komponen dihancurkan');
    });
  }
}