Lifecycle Hooks — CompileDaily Study

Penjelasan

Lifecycle hooks adalah fungsi yang dijalankan Vue secara otomatis di titik tertentu siklus hidup komponen. Yang paling sering dipakai: onMounted() (dijalankan setelah komponen pertama kali dirender ke DOM, cocok untuk fetch data awal) dan onUnmounted() (dijalankan sebelum komponen dihapus dari DOM, cocok untuk cleanup, mis. membersihkan event listener/timer).

Contoh Konsep

<script setup>
import { onMounted, onUnmounted } from 'vue';

function handleResize() {
    console.log('Ukuran window berubah');
}

onMounted(() => {
    console.log('Komponen pertama kali muncul');
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    window.removeEventListener('resize', handleResize); // cleanup, cegah memory leak
});
</script>

Praktikum

Buat komponen dengan onMounted() yang mencetak "Komponen dimuat" ke console, dan onUnmounted() yang mencetak "Komponen dilepas" ke console.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kalau kamu mendaftarkan event listener global (mis. window.addEventListener) di onMounted(), SELALU bersihkan lagi di onUnmounted() dengan removeEventListener — kalau lupa, listener itu tetap aktif walau komponennya sudah hilang dari layar, menyebabkan memory leak.