Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Form Binding dengan v-model, bagaimana menghubungkan input form dan state secara reaktif.
Pada artikel kali ini, kita akan membahas tentang Lifecycle Hooks, yaitu cara menjalankan kode pada fase tertentu dalam siklus hidup sebuah komponen di Vue.
Apa Itu Lifecycle Hooks?
Setiap komponen di Vue memiliki siklus hidup (lifecycle), yaitu tahapan dari mulai dibuat (created), ditampilkan (mounted), diperbarui (updated), hingga dihapus (unmounted).
Dengan lifecycle hooks, kita bisa mengeksekusi fungsi tertentu pada setiap tahap tersebut.
Import Lifecycle Hooks
Lifecycle hooks tersedia di Vue Composition API. Kita bisa mengimportnya dari vue.
<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from "vue"
const count = ref(0)
</script>
onMounted
onMounted dijalankan sekali ketika komponen pertama kali ditampilkan di DOM.
<script setup>
import { ref, onMounted } from "vue"
const message = ref("")
onMounted(() => {
console.log("Komponen sudah tampil di DOM")
message.value = "Halo dari onMounted!"
})
</script>
<template>
<p>{{ message }}</p>
</template>
onUpdated
onUpdated dijalankan setiap kali ada perubahan state/props yang menyebabkan komponen dirender ulang.
<script setup>
import { ref, onUpdated } from "vue"
const count = ref(0)
onUpdated(() => {
console.log("Komponen di-update, count:", count.value)
})
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="count++">Tambah</button>
</div>
</template>
onUnmounted
onUnmounted dijalankan ketika komponen dihapus dari DOM. Biasanya dipakai untuk membersihkan interval, event listener, atau koneksi.
<script setup>
import { onUnmounted } from "vue"
onUnmounted(() => {
console.log("Komponen sudah dihapus dari DOM")
})
</script>
<template>
<p>Komponen ini bisa di-unmount</p>
</template>
Lifecycle Hooks Lain
Selain yang utama, Vue juga menyediakan:
onBeforeMount → sebelum komponen ditampilkan.onBeforeUpdate → sebelum komponen diperbarui.onBeforeUnmount → sebelum komponen dihapus.
Diagram Lifecycle Vue (Sederhana)
onBeforeMount → onMounted
↓
onBeforeUpdate → onUpdated
↓
onBeforeUnmount → onUnmounted
Kesimpulan
Pada artikel ini, kita sudah belajar tentang Lifecycle Hooks di Vue, mulai dari onMounted, onUpdated, onUnmounted, hingga hook tambahan lainnya.
Dengan lifecycle hooks, kita bisa lebih mudah mengatur apa yang terjadi di setiap fase komponen, seperti fetch data, logging, hingga membersihkan resource.
Di artikel berikutnya, kita akan membahas tentang Template Refs, yaitu cara mengakses elemen DOM langsung di Vue.
Terima kasih