Pernahkah kamu penasaran: "Kapan tepatnya sih komponen Vue mulai berjalan? Kapan saya bisa mulai ambil data dari API?" Kalau pernah, kamu nggak sendirian. Banyak developer pemula kesulitan di sini — mereka sudah nulis kode fetch data, tapi datanya selalu telat muncul, atau malah error. Jawabannya ada di konsep yang disebut lifecycle hooks Vue 3. Lifecycle hooks adalah sekumpulan fungsi khusus yang Vue sediakan agar kamu bisa "masuk" dan menjalankan kode tepat di momen tertentu dalam perjalanan hidup komponen — mulai dari kelahirannya, perbaruan data, sampai saat komponen itu dihancurkan. Di artikel ke-9 dari seri Vue from Zero to Zorro ini, kita akan kupas tuntas semua hook, terutama onMounted Vue 3, lewat analogi yang mudah dicerna.
๐ฑ Lifecycle Hooks Vue 3: Seperti Siklus Hidup Manusia
Bayangkan sebuah komponen Vue itu seperti manusia. Ada fase-fasenya:
- Lahir (Creation) — komponen baru dibuat, data disiapkan
- Tumbuh & hidup (Mounting + Updating) — komponen muncul di layar, merespons perubahan data
- Mati (Unmounting) — komponen dihapus dari halaman, sumber daya dibersihkan
Lifecycle hooks Vue 3 ibarat alarm pengingat di setiap fase — kamu bisa set kode tertentu untuk dijalankan tepat saat alarm berbunyi. Analogi sederhananya: waktu kamu bangun pagi (mounting), kamu langsung cek HP (fetch data API). Waktu kamu mau tidur malam (unmounting), kamu matiin lampu (cleanup event listener). Itulah inti dari lifecycle hooks!
onMounted, onUpdated, dst. Lebih rapi dan modular!๐ Tabel Lengkap Lifecycle Hooks Vue 3
| Hook | Kapan Dipanggil | Kegunaan Umum |
|---|---|---|
onBeforeMount |
Sebelum komponen dipasang ke DOM | Jarang dipakai — setup terakhir sebelum render |
onMounted |
Setelah komponen muncul di DOM | Fetch API, akses DOM, inisialisasi library |
onBeforeUpdate |
Sebelum DOM diperbarui karena perubahan data | Baca nilai DOM sebelum berubah |
onUpdated |
Setelah DOM selesai diperbarui | Operasi setelah render ulang |
onBeforeUnmount |
Sebelum komponen dihapus dari DOM | Terakhir kali bisa akses komponen |
onUnmounted |
Setelah komponen dihapus dari DOM | Cleanup: hapus timer, event listener |
๐ onMounted Vue 3: Hook yang Paling Sering Kamu Pakai
onMounted adalah hook yang paling populer dan paling sering digunakan. Hook ini dijalankan tepat setelah komponen berhasil "dipasang" ke dalam DOM — artinya elemen HTML sudah ada di halaman dan bisa kamu akses.
Gunakan onMounted Vue 3 untuk:
- Mengambil data dari API (fetch/axios)
- Mengakses elemen DOM langsung (via template ref)
- Menginisialisasi plugin atau library pihak ketiga (chart.js, leaflet, dll)
- Memasang event listener pada window atau document
๐ Cara Memakai onMounted — Step by Step
onMounted dari package vue di bagian atas file komponen kamu.<script setup> import { ref, onMounted } from 'vue' // Data reaktif const users = ref([]) const isLoading = ref(true) // onMounted dipanggil setelah komponen muncul di DOM onMounted(async () => { try { const response = await fetch('https://jsonplaceholder.typicode.com/users') users.value = await response.json() } finally { isLoading.value = false } }) </script> <template> <div> <p v-if="isLoading">⏳ Memuat data...</p> <ul v-else> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </div> </template>
ref() + onMounted. Ini berguna untuk fokuskan input, animasi, atau init chart.<script setup> import { ref, onMounted } from 'vue' const inputRef = ref(null) onMounted(() => { // Fokuskan input otomatis saat halaman muncul inputRef.value.focus() console.log('Komponen sudah mounted!') }) </script> <template> <input ref="inputRef" placeholder="Langsung fokus saat muncul!" /> </template>
<script setup> tanpa dipahami timing-nya. Gunakan onMounted untuk operasi yang bergantung pada DOM. Gunakan setup() atau langsung di atas untuk inisialisasi data murni.๐ Lifecycle Hooks Vue 3 Lainnya yang Wajib Kamu Tahu
Selain onMounted, ada hooks lain yang sangat berguna tergantung kebutuhanmu. Mari kita bahas satu per satu dengan contoh nyata.
import { ref, onUpdated } from 'vue' const count = ref(0) onUpdated(() => { // Setiap kali count berubah dan DOM update console.log('DOM diperbarui! Nilai count sekarang:', count.value) })
import { onMounted, onUnmounted } from 'vue' let timer onMounted(() => { // Set interval saat komponen muncul timer = setInterval(() => { console.log('⏰ Tick setiap 1 detik...') }, 1000) }) onUnmounted(() => { // WAJIB: hapus timer saat komponen dihancurkan clearInterval(timer) console.log('๐งน Timer dibersihkan, komponen unmounted!') })
onUnmounted adalah penyebab utama memory leak di aplikasi Vue. Setiap kali kamu pakai setInterval, addEventListener, atau subscribe ke stream — selalu pasangkan dengan cleanup di onUnmounted!๐ Tips Praktis Menggunakan Lifecycle Hooks Vue 3
Setelah paham konsep dasar lifecycle hooks Vue 3, berikut adalah tips dari developer berpengalaman agar kamu tidak jatuh ke jebakan yang sama:
import { ref, onMounted, onUnmounted } from 'vue' export function useWindowSize() { const width = ref(window.innerWidth) const handleResize = () => { width.value = window.innerWidth } onMounted(() => window.addEventListener('resize', handleResize)) onUnmounted(() => window.removeEventListener('resize', handleResize)) return { width } }
Kamu Sudah Paham Siklus Hidup Komponen Vue!
Hari ini kamu sudah mempelajari hal yang sangat fundamental dalam Vue 3 — lifecycle hooks. Mari kita rangkum poin utamanya:
- onMounted — hook paling penting, digunakan untuk fetch API, akses DOM, dan inisialisasi library
- onUpdated — dipanggil setiap DOM selesai diperbarui karena perubahan data reaktif
- onUnmounted — wajib untuk cleanup agar tidak terjadi memory leak
- Semua lifecycle hooks Vue 3 bisa digunakan dalam composable untuk kode yang lebih modular
- onMounted bisa dipanggil beberapa kali dalam satu komponen — semua dieksekusi berurutan
No comments:
Post a Comment