Ketika sebuah instance Vue di-inisiasi dengan new Vue(), kemudian dibuat (created), dikaitkan ke DOM (mounted), diperbarui (updated) atau dibuang / dihancurkan (destroyed), di setiap tahapan tersebut Vue akan memanggil satu atau beberapa fungsi / method untuk diproses secara berurutan. Fungsi / method ini disebut sebagai Lifecycle Hooks.

Serupa dengan instance Vue, komponen Vue juga memiliki Hooks. Kita bisa mengisinya dengan rangkaian logic untuk menangani berbagai macam event. Misal, segera setelah komponen Tabs dibuat (created), saya ingin mengambil data berupa gambar dari API server, maka saya harus menyisipkan rangkaian logic tersebut ke hook created() :

created() {
    // kode logic ditulis di sini
}

Beberapa hook yang ada di Vue.js, antara lain :

  • beforeCreate : dipanggil setelah inisiasi instance Vue.
  • created : dipanggil setelah instance Vue dibuat.
  • beforeMount : dipanggil sebelum instance Vue dikaitkan ke DOM.
  • mounted : dipanggil setelah instance Vue dikaitkan ke DOM.
  • beforeUpdate : dipanggil ketika ada perubahan nilai property pada option data dan sebelum Virtual DOM di-render ulang.
  • updated : dipanggil ketika ada perubahan nilai property pada option data dan setelah Virtual DOM di-render ulang.
  • beforeDestroy : dipanggil sebelum instance Vue dibuang / dihancurkan.
  • destroyed : dipanggil setelah instance Vue dibuang / dihancurkan.

dan berikut adalah diagram Lifecycle Hooks pada Vue.js (dikutip dari dokumentasi resmi Vue.js)

lifecycle hooks vue js

Dari total delapan hook yang disediakan oleh Vue.js, setidaknya ada tiga hook yang paling sering digunakan dalam pengembangan aplikasi Vue, yaitu : created, mounted, dan updated. Sebelum kita bahas satu-per-satu, buat terlebih dahulu file latihan012.html, lalu copy paste baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 011</title>
    <link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
    <div id="app">
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue ({    
            el: '#app',
            template: `
                <div>
                    <div class="jumbotron text-center">
                        <h1>Bootstrap 4</h1>
                        <p>Latihan012 - Lifecycle Hooks Pada Vue.js</p>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-12">
                                <div id="belajar-hook">{{ pesan }}</div>
                                <br/>
                                <button @click="renderVirtualDom">re-Render Virtual DOM</button>
                                <br/>
                            </div>
                        </div>
                    </div>
                </div>
            `,
            data () {
                return {
                    pesan: 'Halo Vue',
                    rendered: 0
                }
            },
            methods: {
                renderVirtualDom() {
                  this.rendered = 1
                }
            }
        });
    </script>
</body>
</html>

Lifecycle Created ( )

Tambahkan option created(){ } berikut ke inisiasi Vue :

created() {
    console.log('log dari created():');
    console.log('pesan: ' + this.pesan);
    console.log(document.getElementById('belajar-hook'));
    console.log('');
},

Nilai property pesan yang ada di option data dapat dibaca melalui console.log('pesan: ' + this.pesan). Akan tetapi, console.log(document.getElementById('belajar-hook')) hanya akan menghasilkan null pada inspect Console karena elemen <div id="belajar-hook">{{pesan}}</div> tidak di-render oleh Vue.

penting : template belum di-render, cocok digunakan untuk logic pengambilan data dari API server.

lifecycle hooks vue js

Lifecycle Mounted ( )

Tambahkan option mounted(){ } berikut ke inisiasi Vue :

mounted() {
    console.log('log dari mounted():');
    console.log('pesan: ' + this.pesan);
    console.log(document.getElementById('belajar-hook'));
    console.log('');
}

console.log(document.getElementById('belajar-hook')) tidak menghasilkan null lagi pada inspect Console karena elemen <div id="belajar-hook">{{pesan}}</div> kini telah di-render oleh Vue.

penting : tidak cocok untuk logic pengambilan data dari API server, sebab data sudah harus tersedia sebelum template di-render.

lifecycle hooks vue js

Lifecycle Updated ( )

Tambahkan option updated(){ } berikut ke inisiasi Vue :

updated() {
    console.log('log dari updated():');
    console.log('pesan: ' + this.pesan);
    console.log(document.getElementById('belajar-hook'));
    console.log('');
},

dan kode di bawah ke baris terakhir option mounted(){ } :

this.pesan = 'Semangat Pagi Dunia';

Seharusnya Vue baru memasuki hook updated setelah button di-klik dan directive @click="renderVirtualDom" dipanggil, tapi karena nilai property pesan ternyata berubah di option mounted(){ } melalui this.pesan='Semangat Pagi Dunia', maka begitu lifecycle mounted(){ } berakhir, Vue langsung masuk ke hook updated(){ }.

penting : Vue akan masuk ke hook updated(){ } setiap kali property yang ada di dalam option data mengalami perubahan nilai.

lifecycle hooks vue js

Sekarang, coba klik button untuk memanggil directive @click="renderVirtualDom". Ketika method renderVirtualDom selesai dieksekusi, ternyata Vue justru tidak masuk ke hook updated(){ }. Hal ini disebabkan, setelah klik button dilakukan, tidak ada proses rendering virtual DOM yang terjadi.

Oya, sebelum klik, kita beri sentuhan css Bootstrap ke button (agar tidak terlalu polos), dari :

<button @click="renderVirtualDom">re-Render Virtual DOM</button>

rubah menjadi :

<button 
    type="button" 
    class="btn btn-primary"
    @click="renderVirtualDom"
>re-Render Virtual DOM</button>

Setelah eksekusi file latihan012.html, dapat dilihat bahwa sebanyak apapun button di-klik, Vue tetap tidak masuk ke hook updated(){ }.

lifecycle hooks vue js

Bandingkan dengan kondisi berikut, sisipkan elemen <div v-if="rendered"></div> ke baris yang ditandai dengan <!-- SISIPKAN DI SINI --> :

<div class="col-md-12">
    <div id="belajar-hook">{{ pesan }}</div>
    <br/>
    <button 
        type="button" 
        class="btn btn-primary"
        @click="renderVirtualDom"
    >re-Render Virtual DOM</button>
    <br/>
    
    <!-- SISIPKAN DI SINI -->

    <br/>
</div>

Kini Vue masuk ke hook updated(){ } setelah button di-klik, elemen <div v-if="rendered"></div> di-render oleh Vue ketika directive v-if membaca perubahan nilai property rendered dari 0 ke 1.

lifecycle hooks vue js

penting : kondisi lainnya yang dapat membuat Vue masuk ke hook updated(){ } adalah ketika ada elemen / komponen yang di-render karena penggunaan directive tertentu, misal v-for atau v-if.