Memahami Lifecycle Hook Pada Vue.js

Ketika Vue instance  pertama kali diinisiasi menggunakan `new Vue()`, pada saat itu juga Vue juga menyediakan beberapa function yang di eksekusi mulai dari sebelum dan sesudah observasi data, sebelum dan sesudah template di-render, juga sebelum dan sesudah instance di-mounting ke dalam DOM.
Lifecycle hook adalah bagian yang sangat penting untuk diketahui, agar kita dapat mengetahiu pada step mana kode kita di eksekusi. 

Lifecycle Vue setidaknya di bagi menjadi 4 tipe, yaitu created, mounted, updated dan destroyed.
 

1. Created

Hook created() dapat dijalankan ketika terdapat sebuah instance yang baru saja dibuat, di mana data dari instance dan event telah aktif serta ketika instance dapat diakses. Karena Hook created() dijalankan  saat instance telah dibuat tetapi sebelum DOM terpasang, terkadang sangatlah ideal untuk mengambil data yang diperlukan untuk mengisi instance.

new Vue({
            el: '#app',
            data: {
                     counter : 0
            },
            methods: {
                deleteElement(e){
                    e.target.classList.add('d-none')
                },
                increment(){
                    this.counter++
                },
                decrement(){
                    this.counter--
                    if(this.counter <= 0){
                        this.counter = 0
                    }
                }
            },
            created() {
                console.log('created: ' +  this.counter)
                console.log(this.$el)
            },
 });

Disini hasil dari console this.$el akan menghasilkan undifinied dikarenakan saat created() berjalan DOM belum dipasang.
 

2. Mounted

Hook mounted() akan dijalankan setelah instance telah terpasang dan di mana DOM yang Terender dapat diakses. Vue menggunakan Virtual DOM untuk mengatur/mengelola dan melacak perubahan dalam suatu aplikasi dengan cara yang "lebih simple" daripada secara langsung melacak perubahan yang dilakukan pada DOM aslinya. Ketika kita membahas tentang Mounting, maka kita sedang membahas tentang proses mengubah elemen virtual menjadi elemen DOM asli oleh Vue.
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.

new Vue({
            el: '#app',
            data: {
                     counter : 0
            },
            methods: {
                deleteElement(e){
                    e.target.classList.add('d-none')
                },
                increment(){
                    this.counter++
                },
                decrement(){
                    this.counter--
                    if(this.counter <= 0){
                        this.counter = 0
                    }
                }
            },
            created() {
                console.log('created: ' +  this.counter)
                console.log(this.$el)
            },
            mounted() {
                console.log('mounted: ' +  this.counter)
                console.log(this.$el)
            },
 });

3. Updated

Hook updated() akan berjalan ketika terdapat data yang diubah - template akan diperbarui untuk menampilkan perubahan tersebut. Hook updated() akan berjalan setiap kali terdapat perubahan data yang menyebabkan instance untuk diperbarui/dirender ulang.

new Vue({
            el: '#app',
            data: {
                     counter : 0
            },
            methods: {
                deleteElement(e){
                    e.target.classList.add('d-none')
                },
                increment(){
                    this.counter++
                },
                decrement(){
                    this.counter--
                    if(this.counter <= 0){
                        this.counter = 0
                    }
                }
            },
            created() {
                console.log('created: ' +  this.counter)
                console.log(this.$el)
            },
            mounted() {
                console.log('mounted: ' +  this.counter)
                console.log(this.$el)
            },
              updated(){
                console.log('updated: ' +  this.counter)
                console.log(this.$el)
            },
 });

4. Destroyed

Hook destroyed() dapat dijalankan setelah sebuah instance dihancurkan (destroyed) sepenuhnya (yang dapat dilakukan dengan metode vm.$destroy()). Hook tersebut merupakan Hook terakhir yang akan dijalankan dalam Lifecycle, dan pada saat ini, instance Event Listener, Child, dan Directive akan segera dihapus.

5. Hook Before

Untuk setiap Hook Lifecycle standar (created(), mounted(), updated(), dan destroyed()), Vue juga menyediakan Hook yang berjalan sesaat sebelum (Before) Lifecycle terjadi. Hook Before sangat berguna jika kita ingin menjalankan beberapa fungsi sebelum perubahan Lifecycle yang dimaksudkan telah dibuat.