Belajar Vue JS Life Cycle Hooks Untuk Pemula

Artikel ini ialah tulisan pertama saya untuk dipublikasi di media Badr Interactive, sebuah perusahaan IT yang bergerilya dengan ide Software House dan Startup Studio. Saat ini lebih banyak proyek dan product yang kami bangun satu diantaranya manfaatkan technologi Vue.js pada frontendnya, seperti proyek kami namanya Paytren Magazine, RIMA Universitas Indonesia, dan product pendataan beribadah Yawme, produk baru yang kami bangun Bimbel Online Nurul Fikri, dan produk dan proyek yang lain nantinya yang kemungkinan kami tetap menggunakan VueJS sebagai frame-work frontend.

# Apakah itu Lifecycle Hook pada Vue JS

Pada tulisan ini kali saya akan mengulas mengenai lifecycle hook pada Vue, tetapi sebelumnya kita akan mengulas apakah yang dimaksud dengan lifecycle hook. Saat Vue instance diinisiasi pertama kalinya menggunakan `new Vue()`, di saat yang serupa Vue sediakan beberapa function yang dilakukan step-by-step dimulai dari sebelum dan setelah observasi data, sebelum dan setelah template di-render, sebelum dan setelah instance di-mounting ke DOM (Data Objek Fashion).

Lifecycle hook ialah sisi yang penting untuk diketahui karena Vue akan tentukan pada tahap apa code kita akan dieksekusi. Lihat diagram berikut, kotak warna hijau sebagai tahap eksekusi Vue, dan yang warna kuning sebagai lifecycle hook Vue.

Lifecycle Vue minimal di bagi jadi 4 type, yaitu create, mount, updating dan destruction. Silahkan kita ulas satu-satu type itu dan ada lifecycle hook apa didalamnya.

# Creation

Creation ialah type lifecycle yang pertama kalinya dijalankan pada component, memungkinkan kita untuk menjalankan code sebentar sebelum dan setelah component mengupdate DOM. Pada tipe ini ada 2 lifecycle yakni beforeCreate dan created.

## beforeCreate

Lifecycle hook beforeCreate dijalankan pertama kalinya pada suatu component saat sebelum semua diinsiasi, saat data dan moment belum diinisiasi oleh Vue. Ini bermanfaat saat kita ingin jalankan code javascript saat sebelum component dilakukan, seperti menyimpan code javascript dalam tag head pada html.

var app = new Vue({
  el: '#app',
  data () {
    return {
      data: 'vue data'
    }
  },
  beforeCreate () {
    console.log(this.data)
    // undefined, state data belum di inisiasi oleh vue
  }
});

## created

Lifecycle hook created dieksekusi oleh vue saat data dan moment (moment computed dan watch *akan kita ulas di tulisan seterusnya) telah selesai di-render, tapi template belum di-render oleh vue. Lihat contoh ini.

Lifecycle ini paling sering saya gunakan, yang karakternya untuk merekayasa state data yang berada di dalam component, misalkan untuk ambil data dari api dan meng-assign-nya pada suatu state.

# Mounting

Mounting sebagai type lifecycle pada Vue yang memungkinkan kita untuk mengakses dom tepat sebelum dan setelah template di-render. Tidak boleh pakai lifecycle type ini untuk kepentingan ambil data dan moment, karena template memerlukan data itu saat sebelum ditampilkan.

## beforeMount

beforeMount ialah lifecyle hookyang dijalankan oleh Vue saat sebelum template pada suatu component di-render (ditampilkan) tapi sesudah template di-compile oleh vue untuk mengakses dom. Lihat contoh ini.

var app = new Vue({
  el: '#app',
  template: '<div id="new-template">{{ data }}</div>',
  data () {
    return {
      data: 'vue data'
    }
  },
  beforeMount () {
    console.log(document.getElementById('new-template'))
    // null, template id 'new-template' tidak belum di render
  }
});

## mounted

mounted dieksekusi oleh vue sesudah template di-render, kita bisa mengakses semua component, templates, data, even, dan objek global vue lainnya. Ini seperti kita menulis code javascript di dasar code html dalam body. Paling sering dipakai untuk melakukan modifikasi DOM template dan mengintegrasikan eksternal library Vue.

var app = new Vue({
  el: '#app',
  template: '<div id="new-template">{{ data }}</div>',
  data () {
    return {
      data: 'vue data'
    }
  },
  mounted () {
    console.log(document.getElementById('new-template'))
    // template id 'new-template' di kenali
  }
});

Pada lifecycle hook mounted umumnya saya pakai untuk mengakses semua data property template atau event pada suatu component.

# Updating

Tipe ini dieksekusi oleh Vue setiap sebuah properti data dipakai dan diakali memakai `watch-computed-render`, untuk ini akan diulas pada artikel seterusnya. Umumnya dipakai saat debugging untuk mengetahui kapan sebuah component di-render ulang. Ada 2 lifecycle hook pada tipe, silahkan kita ulas satu-satu.

## beforeUpdate

Lifecycle hook beforeUpdate di eksekusi oleh vue saat stage data telah di up-date pada suatu component, tepat saat sebelum DOM me-render ulang template. Lihat contoh di bawah ini.

var app = new Vue({
  el: '#app',
  template: `
    <button @click="reRenderDom">render dom!</button>
    <div v-if="renderDom">
      <div id="debug">Dom already rendered! <span style="color: red; "@click="removeDom">remove dom!</span></div>
    </div>
  `,
  data () {
    return {
      renderDom: 0
    }
  },
  beforeUpdate () {
    console.log('check beforeUpdate data', this.renderDom)
    // hasilnya 1, this.renderDom berhasil di update
    console.log('check beforeUpdate re-render', document.getElementById('debug'))
    // template id 'debug' null, karena update render belum di eksekusi
  },
  methods: {
    reRenderDom () {
      this.renderDom = 1
    },
    removeDom () {
      this.renderDom = 0
    }
  }
});

## updated

Lifecycle hook updated dieksekusi oleh Vue saat data berhasil di-update dan DOM sukses di-render kembali. Bila kita ingin mengakses DOM sesudah property di-update, lifecycle hook ini ialah yang terbaik untuk kita gunakan.

var app = new Vue({
  el: '#app',
  template: `
    <button @click="reRenderDom">render dom!</button>
    <div v-if="renderDom">
      <div id="debug">Dom already rendered! <span style="color: red; "@click="removeDom">remove dom!</span></div>
    </div>
  `,
  data () {
    return {
      renderDom: 0
    }
  },
  updated () {
    console.log('check updated data', this.renderDom)
    // hasilnya 1, this.renderDom berhasil di update
    console.log('check updated re-render', document.getElementById('debug'))
    // template id 'debug' di kenali
  },
  methods: {
    reRenderDom () {
      this.renderDom = 1
    },
    removeDom () {
      this.renderDom = 0
    }
  }
});

# Destruction

Lifecycle tipe ini memungkinkan kita untuk melakukan action, trigger, dan moment sebentar atau saat sebelum sebuah component ditiadakan dari sebuah DOM. Ada 2 lifecycle hook pada tipe ini yakni beforeDestroy dan destroyed. Hook ini paling jarang-jarang saya pakai, dan hingga kini saya belum menemukan perbedaan di antara keduanya, kemungkinan bila rekan sekaligus ada yang mengerti langsung kita bahas pada kolom komentar di bawah ya.

Tapi saya tetap akan memberi contoh untuk ke-2 nya, lihat code di bawah ini.

<div id="app">
  <vm-test v-if="active"></vm-test>
  <button @click="destroyComponent">destroy component!</button>
</div>

Vue.component('vm-test', {
  template: `
    <div id="debug">{{ data }}</div>
  `,
  data () {
    return {
      data: 'component data'
    }
  },
  beforeDestroy () {
    console.log(document.getElementById('debug'))
    // element id 'debug' null, berhasil di destroy oleh parent template
  },
  destroyed () {
    console.log(document.getElementById('debug'))
    // element id 'debug' null, berhasil di destroy oleh parent template
  }
});

var app = new Vue({
  el: '#app',
  data () {
    return {
      active: true
    }
  },
  methods: {
    destroyComponent () {
      this.active = false
    }
  }
});

Saat button "destroy component" diklik, karena itu component "vm-test" ditiadakan dari root/parent component. Dan saat itu lifecycle hook beforeDestroy dan destroyed dieksekusi oleh Vue.

Penting untuk kita mengetahui lifecycle hook pada Vue bila kita ingin memakai frame-work ini. Minimal tahu pada tahap apa code kita akan dijalankan, bila tidak karena itu kemungkinan code kita tidak dieksekusi dan menghasilkan sesuai kemauan kita.