Lifecycle Hooks

Siklus hidup komponen: onMounted, onUpdated, onUnmounted dan kawan-kawan, kapan memakai masing-masing, dan membersihkan timer/listener agar tidak bocor.

Part 16 dari 25 ± 45 menit Gratis

Komponen punya "umur"

Setiap komponen Vue melewati tahap-tahap: dibuat → dipasang ke halaman → diperbarui berkali-kali → dihancurkan. Vue memberi kita "kait" (hook) untuk menjalankan kode pada tahap tertentu. Contoh kebutuhan: mengambil data saat komponen pertama muncul, memasang timer, lalu mematikannya saat komponen hilang.

Hook yang paling sering dipakai

Hook	Kapan dipanggil	Kegunaan umum
`onBeforeMount`	Sebelum DOM dibuat	Jarang dipakai
`onMounted`	Setelah komponen masuk DOM	Ambil data, akses DOM, pasang timer/listener
`onBeforeUpdate`	Sebelum DOM diperbarui	Membaca state DOM lama
`onUpdated`	Setelah DOM diperbarui	Menyesuaikan DOM (hati-hati loop!)
`onBeforeUnmount`	Sebelum dihancurkan	Masih bisa mengakses komponen
`onUnmounted`	Setelah dihancurkan	Bersih-bersih: hentikan timer, lepas listener
`onErrorCaptured`	Error dari komponen turunan	Menangkap & menampilkan error

Isi <script setup> sendiri berjalan pada tahap "created" — jadi tidak ada hook onCreated; cukup tulis kodenya langsung di script.

Contoh: onMounted

import { ref, onMounted } from 'vue'

const status = ref('Memuat...')

onMounted(() => {
  status.value = 'Terpasang'
  console.log('Komponen sudah ada di DOM')
})

Hook boleh dipanggil beberapa kali dalam satu komponen, dan harus dipanggil sinkron di dalam setup (bukan di dalam callback asinkron).

Bersih-bersih dengan onUnmounted

Timer atau listener yang dibuat manual tidak dihentikan otomatis saat komponen hilang. Jika dibiarkan, ia terus jalan di latar belakang: pemborosan memori dan bug aneh (memory leak).

import { ref, onMounted, onUnmounted } from 'vue'

const detik = ref(0)
let timer

onMounted(() => {
  timer = setInterval(() => detik.value++, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})

Hal yang perlu dibersihkan: setInterval/setTimeout, window.addEventListener, koneksi WebSocket, langganan pustaka eksternal.

Mengambil data saat komponen muncul

onMounted(async () => {
  const res = await fetch('/api/produk')
  produk.value = await res.json()
})

Diagram singkat

setup()  →  onBeforeMount  →  (render)  →  onMounted
                                              │  data berubah
                                    onBeforeUpdate → onUpdated
                                              │  v-if=false / pindah halaman
                                 onBeforeUnmount → onUnmounted

Kesalahan umum

Mengakses elemen DOM di setup langsung — belum ada. Tunggu onMounted.
Lupa membersihkan timer/listener di onUnmounted.
Mengubah state yang memicu render ulang di dalam onUpdated tanpa kondisi → perulangan tak berujung.