Mengenal lifecycle hooks pada Vue JS

Mengenal lifecycle hooks pada Vue JS

Tulisan ini adalah tulisan pertama saya untuk di publikasikan 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 kedepan 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 di maksud dengan lifecycle hook. Ketika Vue instance di inisiasi 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 di ketahui karena Vue akan menentukan pada step apa kode kita akan di eksekusi. Perhatikan diagram berikut, kotak berwarna hijau merupakan step eksekusiVue, dan yang berwarna kuning merupakan lifecycle hook Vue.

Di ambil dari dokumentasi Vue JS

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 di jalankan pada component, memungkin kan 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 di jalankan pertama kali pada sebuah component sebelum semuanya di insiasi, ketika data dan event belum di inisiasi oleh Vue. Ini berguna ketika kita ingin menjalankan kode javascript sebelum component di eksekusi, layaknya menaruh kode javascript di dalam tag head pada html.

## created

Lifecycle hook created di eksekusi 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 mengassignnya 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 di tampilkan.

## beforeMount

beforeMount adalah lifecyle hookyang di jalankan oleh Vue sebelum template pada sebuah component di render (di tampilkan) tetapi setelah template di compile oleh vue untuk mengakses dom. Perhatikan contoh berikut.

## mounted

mounted di eksekusi 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 di eksekusi oleh Vue setiap kali sebuah property data di gunakan dan di manipulasi menggunakan `watch-computed-render`, untuk hal ini akan di bahas pada artikel selanjutnya. Biasanya di gunakan 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 di eksekusi 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 di hilangkan 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 akanmemberikan contoh untuk keduanya, perhatikan kode berikut ini.

Ketika button “destroy component” di klik, maka component “vm-test” di hilangkan dari root/parent component. Dan seketika itu juga lifecycle hook beforeDestroy dan destroyed di eksekusi oleh Vue.

Penting untuk kita mengetahui lifecycle hook pada Vue jika kita ingin menggunakan framework ini. Minimal tahu pada step apa kode kita akan di jalankan, jika tidak maka kemungkinan besar kode kita tidak akan di eksekusi dan menghasilkan sesuai dengan kemauan kita.

“Mengenal lifecycle hooks pada Vue JS” Posted first on ” JavaScript on Medium “
Author: Eka Prasasti

Author: Pawan Kumar

Leave a Reply

Close Menu
%d bloggers like this:
Skip to toolbar