Mengenal lifecycle hooks pada Vue JS
Tulisan ini adalah tulisan pertama saya untuk dipublikasikan di medium Badr Interactive, sebuah perusahaan IT yang bergerilya dengan konsep Software House & Startup Studio. Saat ini banyak project dan product yang sedang kami kembangkan salah satunya memanfaatkan teknologi Vue.js pada frontendnya, seperti project kami bernama Paytren Magazine, RIMA Universitas Indonesia, dan product pencatatan ibadah Yawme, juga produk baru yang sedang kami kembangkan Bimbel Online Nurul Fikri, dan produk dan project lainnya kedepannya yang kemungkinan besar kami akan tetap menggunakan VueJS sebagai framework frontend.
# Apa itu Lifecycle Hook pada Vue JS
Pada tulisan kali ini saya akan membahas mengenai lifecycle hook pada Vue, tapi sebelum itu kita akan membahas apa yang dimaksud dengan lifecycle hook. Ketika Vue instance diinisiasi pertama kali menggunakan `new Vue()`, pada saat yang sama Vue juga menyediakan beberapa function yang di eksekusi step-by-step mulai dari sebelum dan sesudah observasi data, sebelum dan sesudah template di-render, juga sebelum dan sesudah instance di-mounting ke dalam DOM (Data Object Modeling).
Lifecycle hook adalah bagian yang sangat penting untuk diketahui karena Vue akan menentukan pada step apa kode kita akan dieksekusi. Perhatikan diagram berikut, kotak berwarna hijau merupakan step eksekusi Vue, dan yang berwarna kuning merupakan lifecycle hook Vue.
Lifecycle Vue setidaknya di bagi menjadi 4 tipe, yaitu create, mount, updating dan destruction. Mari kita bahas satu persatu tipe tersebut dan terdapat lifecycle hook apa saja di dalamnya.
# Creation
Creation adalah tipe lifecycle yang pertama kali dijalankan pada component, memungkinkan kita untuk menjalankan kode sesaat sebelum dan sesudah component mengupdate DOM. Pada tipe ini terdapat 2 lifecycle yaitu beforeCreate dan created.
## beforeCreate
Lifecycle hook beforeCreate dijalankan pertama kali pada sebuah component sebelum semuanya diinsiasi, ketika data dan event belum diinisiasi oleh Vue. Ini berguna ketika kita ingin menjalankan kode javascript sebelum component dieksekusi, layaknya menaruh kode javascript di dalam tag head pada html.
## created
Lifecycle hook created dieksekusi oleh vue ketika data dan event (event computed dan watch *akan kita bahas di tulisan selanjutnya) telah selesai di-render, tetapi template belum di-render oleh vue. Perhatikan contoh berikut.
Lifecycle ini paling sering saya pakai, yang sifatnya untuk memanipulasi state data yang ada di dalam component, misalnya untuk mengambil data dari api dan meng-assign-nya pada sebuah state.
# Mounting
Mounting merupakan tipe lifecycle pada Vue yang memungkinkan kita untuk mengakses dom persis sebelum dan sesudah template di-render. Jangan gunakan lifecycle tipe ini untuk keperluan mengambil data dan event, karena template membutuhkan data tersebut sebelum ditampilkan.
## beforeMount
beforeMount adalah lifecyle hookyang dijalankan oleh Vue sebelum template pada sebuah component di-render (ditampilkan) tetapi setelah template di-compile oleh vue untuk mengakses dom. Perhatikan contoh berikut.
## mounted
mounted dieksekusi oleh vue setelah template di-render, kita dapat mengakses seluruh component, templates, data, even, dan object global vue yang lain. Hal ini seperti kita menulis kode javascript di dasar kode html di dalam body. Paling sering di gunakan untuk memodifikasi DOM template dan mengintegrasikan external library Vue.
Pada lifecycle hook mounted biasanya saya gunakan untuk mengakses semua data properti template maupun event pada sebuah component.
# Updating
Tipe ini dieksekusi oleh Vue setiap kali sebuah property data digunakan dan dimanipulasi menggunakan `watch-computed-render`, untuk hal ini akan dibahas pada artikel selanjutnya. Biasanya digunakan saat debugging untuk mengetahui kapan sebuah component di-render ulang. Terdapat 2 lifecycle hook pada tipe, mari kita bahas satu persatu.
## beforeUpdate
Lifecycle hook beforeUpdate di eksekusi oleh vue ketika stage data sudah di update pada sebuah component, tepat sebelum DOM me-render ulang template. Perhatikan contoh berikut ini.
## updated
Lifecycle hook updated dieksekusi oleh Vue ketika data berhasil di-update dan DOM berhasil di-render kembali. Jika kita ingin mengakses DOM setelah properti di-update, lifecycle hook ini adalah yang paling tepat untuk kita gunakan.
# Destruction
Lifecycle tipe ini memungkinkan kita untuk melakukan action, trigger, dan event sesaat atau sebelum sebuah component dihilangkan dari sebuah DOM. Ada 2 lifecycle hook pada tipe ini yaitu beforeDestroy dan destroyed. Hook ini paling jarang saya gunakan, dan sampai saat ini saya belum menemukan perbedaan antara keduanya, mungkin jika teman sekalian ada yang mengerti langsung kita diskusikan pada kolom komentar di bawah ya.
Tetapi saya akan tetap akan memberikan contoh untuk keduanya, perhatikan kode berikut ini.
Ketika button “destroy component” diklik, maka component “vm-test” dihilangkan dari root/parent component. Dan seketika itu juga lifecycle hook beforeDestroy dan destroyed dieksekusi oleh Vue.
Penting untuk kita mengetahui lifecycle hook pada Vue jika kita ingin menggunakan framework ini. Minimal tahu pada step apa kode kita akan dijalankan, jika tidak maka kemungkinan besar kode kita tidak akan dieksekusi dan menghasilkan sesuai dengan kemauan kita.
