Vue: Memahami Lifecycle Hook pada Vue.js

Vue dapat memberikan kita beberapa Hook di mana kita dapat memasukkan fungsionalitas yang kita buat sendiri pada Lifecycle Instace. Untuk menghubungkan Lifecycle, kita harus menentukan fungsi pada instance yang akan memanggil Vue pada waktu yang tepat di setiap Hook. Contoh dari Lifecycle Hook tersebut adalah Hook created().


Hook 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 pada saat instance telah dibuat tetapi sebelum DOM terpasang, terkadang sangatlah ideal untuk mengambil data yang diperlukan untuk mengisi instance.

Pada bagian kali ini, mari kita coba membuat elemen Card yang isinya berasal dari sumber eksternal.
Sumber data eksternal yang menyediakan data tersebut adalah Sumber JSONPlaceholder- yaitu Online REST API palsu yang dapat kita gunakan untuk pengujian dan pembuatan Prototype.

Saat kita menyiapkan Vue Instance, kita juga harus menginisialisasi semua data yang ingin kita tampilkan pada template:

new Vue({
  el: '#aplikasi',
  data: {
    name: '',
    email: '',
    company: {
      name: '',
      catchPhrase: '',
    }
  },
});


Disini, kita akan menggunakan elemen UI Card dari Bulma dan membinding data ke dalam Template:
./index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Tutorial Vue | EL Creative Academy</title>
  <link rel="stylesheet" href="./styles.css" />
  <link rel="stylesheet" href="https://unpkg.com/bulma@0.7.4/css/bulma.css" />
</head>

<body>
  <div id="aplikasi">
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">
          {{name}}
        </p>
      </header>
      <div class="card-content">
        <div class="content">
          <p>{{company.name}}</p>
          <p>"{{company.catchPhrase}}"</p>
        </div>
      </div>
      <footer class="card-footer">
        <a href="#" class="card-footer-item">
          {{email}}
        </a>
      </footer>
    </div>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./main.js"></script>
</body>
</html>


Pada template diatas, kita telah menggunakan tag <script> yang merujuk pada Library Axios yang akan menjadi HTTP Library dan akan kita gunakan untuk membuat GET Request.

Untuk sekarang ini, Card yang kita miliki tidak akan menampilkan apa pun dan akan terlihat seperti berikut:

Card Kosong

Keterangan: Tanda kutip diatas adalah kutipan yang kita gunakan di dalam Template untuk membungkus {{company.catchPhrase}}

Sekarang, mari kita perbarui Vue instance untuk membuat Request ke JSONPlaceholder API. Kita akan mendeklarasikan Hook create() dan menggunakan Library Axios untuk mengajukan Request.
./main.js

new Vue({
 el: '#aplikasi',
 data: {
  name: '',
  email: '',
  company: {
   name: '',
   catchPhrase: '',
  }
 },
 created() {
  axios.get('https://jsonplaceholder.typicode.com/users').then((response) => {
   // Menggunakan Response untuk Memperbarui Data
  });
 },
});


Sumber /users dari API akan mengembalikan rincian dari 10 pengguna yang berbeda. Untuk aplikasi yang akan kita buat, kita akan mengambil satu objek user secara acak dan memperbarui rincian data dari objek tersebut:
./main.js

new Vue({
 el: '#aplikasi',
 data: {
  // ...
 },
 created() {
  axios.get('https://jsonplaceholder.typicode.com/users').then((response) => {
   const data = response.data;
   const penggunaRandom = response.data[Math.floor(Math.random() * data.length) ];

   this.name = penggunaRandom.nama;
   this.email = penggunaRandom.email;
   this.company.name = penggunaRandom.company.name;
   this.company.catchPhrase = penggunaRandom.company.catchPhrase;
  });
 },
});


Saat kita menjalankannya, Hook create() akan berjalan sebelum DOM terpasang pada template. Pemanggilan Axios pada hook terjadi secara tidak bersamaan. Dengan koneksi yang berpotensi buruk, DOM mungkin sudah dipasang sementara pemanggilan async masih dalam perjalanan. Hal ini tentu saja dapat membuat pengguna melihat Card yang kosong selama beberapa detik.

Delay

Untuk membuat perubahan serta mengingatkan pengguna bahwa data masih dalam proses Fetching, kita dapat menginisialisasi properti data dengan nilai 'Memuat...' sebagai pengganti dari string yang kosong:
./main.js

new Vue({
 el: '#aplikasi',
 data: {
  name: 'Memuat...',
  email: 'Memuat...',
  company: {
   name: 'Memuat...',
   catchPhrase: 'Memuat...',
  }
 },
 created() {
  // ...
 },
});


Sekarang, pengguna akan tahu bahwa akan terlihat teks "Memuat..." Jika data belum tersedia.

Hook create()

Lihat kode di Github | Lihat Live Demo

Kita juga harus selalu memiliki kasus kesalahan yang sesuai dalam Request untuk memberitahukan  pengguna bahwa terdapat sesuatu yang salah saat pemanggilan telah gagal. Tetapi, kita tidak akan mempraktekkannya disini dan mungkin hal tersebut bisa dijadikan latihan yang bagus untuk kalian.


Hook Mounted

Hook mounted() akan dijalankan setelah instance telah terpasang dan di mana DOM yang Terender dapat diakses.

Apa Maksud dari Mounting?

Vue akan melacak dan membuat perubahan ke representasi Virtual dari node di DOM Tree sebelum menambal perubahan tersebut ke DOM yang asli. Hal tersebut merupakan in-memory view yang telah dikelola dan diatur oleh Vue untuk kita dan sering disebut dengan istilah Virtual DOM.

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.

Dengan memasang Hook mounting() pada instance, kita dapat mengakses DOM yang telah ter-Render dengan this.$el.

new Vue({
 el: '#aplikasi',
 data: {
  // ...
 },
 created() {
  // ...
 },
 mounted() {
  console.log(this.$el);
 }
});


Dengan Console Logging DOM yang di-render dalam aplikasi Card yang kita buat, kita akan dapat melihat informasi user yang dirender.

DOM

Karena kita dapat mengakses DOM yang dirender, Hook mounted() terkadang paling baik digunakan ketika perubahan yang bergantung pada DOM perlu dibuat (yaitu ketika kita membutuhkan akses ke DOM untuk melakukan perubahan tertentu).

Hook Updated

Pada Seri ke 3, kita telah membahas bagaimana aplikasi Vue dapat bersifat Reactive. Singkatnya, ketika terdapat data yang diubah - template akan diubah ulang (Diperbarui) untuk menampilkan perubahan tersebut. Hook mounted() akan berjalan setiap kali terdapat perubahan data yang menyebabkan instance untuk diperbarui/dirender ulang.

Hook mounted() akan berperilaku seperti properti Watcher tetapi berdampak pada seluruh instance. Perlu diketahui bahwa untuk melakukan perubahan pada kondisi tertentu, properti Watch (atau seringkali disebut dengan properti Watcher) harus selalu digunakan sebagai penggantinya.

Pada Hook mounted(), DOM yang dapat diakses akan merujuk ke DOM yang ter-render setelah pembaruan dilakukan.

new Vue({
  el: '#aplikasi',
  data: {
    // ...
  },
  created() {
    // Instance telah terpasang
  },
  mounted() {
    // Instance telah terpasang
  },
  updated() {
    // Instance telah terpasang

    console.log(this.$el) // DOM setelah pembaruan selesai
  }
});


Hook 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.

new Vue({
  el: '#aplikasi',
  data: {
    // ...
  },
  created() {
    // Instance telah terpasang
  },
  mounted() {
    // Instance telah terpasang
  },
  updated() {
    // Instance telah terpasang
  }
  destroyed() {
    // Instance telah terpasang
  }
});


Meskipun kita mungkin tidak menemukan diri kita sendiri dengan menggunakan Hook destroyed(), kita dapat menggunakan hook untuk melakukan perubahan pada menit terakhir sebelum instance akan dihapus sepenuhnya.

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.

Kita dapat melihat Dokumentasi Vue yang memiliki diagram Lifecycle yang disusun dengan sangat baik yang membahas secara lebih rinci tentang apa yang terjadi ketika instance melewati setiap tahap Lifecyclenya.

Itulah semua Lifecycle Hook yang dapat kita gunakan untuk berinteraksi dengan Vue Framework. Untuk kedepannya, kita akan sering menggunakan Hook tersebut saat membuat aplikasi Vue dan sangatlah baik untuk mengenal Hook tersebut.

Tulis Komentar

0 Komentar