Memahami Method dan Computed Property pada Vue

Pada seri ini, kita akan mempelajari Computed Property dari instance Vue dan melihat perbedaannya Instance Standar yaitu Method.
Yasya El Hakim
Memahami Method dan Computed Property pada Vue

Pada seri ini, kita akan mempelajari Computed Property dari Vue instance dan melihat perbedaannya dengan Instance Standar yaitu Method.

Sampai dengan poin ini, kita telah membahas beberapa fitur dasar dari Vue Instance seperti Data Reactivity, Template Binding (Mustache Syntax/Directive), dan Vue Devtools.

Sekarang, kita akan melihat dua sifat spesifik dari Vue Instance, yaitu Method (Metode) dan Computed Properties.



Method pada Vue

Kita telah mempelajari dan menggunakan Method pada seri Pertama dan Ketiga yang berfungsi untuk melihat Reactivity dari Data yang ada di Vue Instance. Sebagai pengingat, Method pada Vue Instance memiliki fungsi yang sama seperti JavaScript normal dan dapat dievaluasi/dijalankan hanya ketika dipanggil.

Disini kita akan menggunakan kembali contoh yang ada di dalam dokumentasi Vue yang dapat membalik serangkaian karakter dari String. Pertama-tama kita akan membuat Vue Instance yang berisi properti pesan dan memiliki nilai 'Salam!'. Mari kita lihat contohnya:
./main.js

new Vue({
 el: '#aplikasi',
 data: {
  pesan: 'Salam!',
 },
});

Pada Template, kita akan mengikat (Binding) pesan secara langsung dalam keadaan terbalik. Kita akan membalikkan (Reverse) nilai pada pesan dengan memisahkan properti menjadi karakter Array (.split('')), membalikkan elemen yang ada di dalam array (.reverse()), dan menggabungkan kembali menjadi satu String (.join('')).
./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 card-header-title">
        <span>Asli: </span>
        {{ pesan }}
      </header>

      <header class="card-header card-header-title">
        <span>Dibalik: </span>
        {{ pesan.split('').reverse().join('') }}
      </header>
    </div>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="./main.js"></script>
</body>
</html>

Dengan bantuan Style yang diberikan oleh Bulma, aplikasi yang kita buat akan terlihat seperti berikut:

Method pada Vue

Lihat kode di Github | Lihat Live Demo

Tidak ada yang salah dengan menentukan perubahan fungsi seperti di atas dalam sebaris. Namun, Method juga sering kali tepat digunakan ketika perubahan yang dimaksud terlihat semakin sulit diuraikan.

Kita juga dapat mengubah contoh di atas dengan menggunakan Method dalam Vue Instance untuk dapat membalikkan String pesan:
./main2.js

new Vue({
 el: '#aplikasi',
 data: {
  pesan: 'Salam!',
 },
 methods: {
  stringTerbalik(string) {
   return string.split('').reverse().join('');
  },
 }
});

Metode diatas telah diberi nama stringTerbalik dan kita mengharapkan Payload. Kita dapat mendeklarasikan Method tersebut pada Template dan meneruskan properti pesan sebagai Payload:
./index2.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 card-header-title">
        <span>Asli: </span>
        {{ pesan }}
      </header>

      <header class="card-header card-header-title">
        <span>Dibalik: </span>
        {{ stringTerbalik(pesan) }}
      </header>
    </div>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="./main2.js"></script>
</body>
</html>

Hasilnya akan seperti sebelumnya dengan menampilkan pesan salam dan versi terbalik tepat di bawahnya:

Method salam

Lihat kode di Github | Lihat Live Demo

Dua contoh di atas telah menghasilkan hal yang sama. Method mungkin adalah pilihan yang lebih tepat karena dapat membuat Template terlihat lebih Clean dan lebih mudah untuk dipahami.

Kita juga dapat menghasilkan hal yang sama seperti di atas dengan menggunakan properti lain yang dikenal dengan istilah Computed Properties.

Computed Properties pada Vue

Computed Properties digunakan untuk menangani kalkulasi atau penghitungan informasi yang lebih kompleks atau rumit untuk dapat ditampilkan pada Template. Pada contoh yang ketiga ini, kita akan menggunakan Computed Property yang diberi nama pesanTerbalik - yang hanya dapat membalikkan properti data pesan seperti yang telah kita buat sebelumnya:
./main3.js 

new Vue({
    el: '#aplikasi',
    data: {
        pesan: 'Salam!',
    },
    computed: {
        pesanTerbalik() {
            return this.pesan.split('').reverse().join('');
        },
    }
});

Pada Template, kita dapat merender nilai dari Computed Property pesanTerbalik sama seperti yang akan kita berikan pada properti data lainnya:
./index3.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 card-header-title">
        <span>Asli: </span>
        {{ pesan }}
      </header>

      <header class="card-header card-header-title">
        <span>Dibalik: </span>
        {{ pesanTerbalik }}
      </header>
    </div>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script src="./main3.js"></script>
</body>
</html>

Dengan contoh kode seperti diatas, aplikasi kita akan terlihat seperti yang kita diinginkan:

Computed Properties pada Vue

Lihat kode di Github | Lihat Live Demo

Penggunaan dari Computed Property tersebut menimbulkan beberapa pertanyaan seperti, apa bedanya menggunakan Computed Property dengan Method sebagai pengganti dalam mengembalikan nilai? Mari kita simak jawabannya.

Method vs Computed Property pada Vue

Pada beberapa contoh atas, menggunakan Method atau Computed Property dapat menghasilkan fungsi yang sama persis. Perbedaan utama dalam menggunakan Computed Property adalah bahwa Computed Property di-cache berdasarkan ketergantungan (Dependency) yang diandalkan.

Jika kita melihat Computed Property pesanTerbalik yang telah kita deklarasikan diatas, kita dapat melihatnya hanya memiliki satu Data Dependency - properti pesan.
./main3.js:6

computed: {
    pesanTerbalik() {
        return this.pesan.split('').reverse().join('');
    },
}

Nilai dari pesanTerbalik akan secara langsung tergantung pada properti data pesan. Ketika nilai pesan berubah, pesanTerbalik juga akan berubah. Computed Property dapat berguna karena selama ketergantungan properti data (pesan) tetap Konstan (Tidak berubah), memanggil Computed Property (pesanTerbalik) sebanyak beberapa kali juga akan selalu mengembalikan nilai cache yang sama.

Mari kita lihat contoh sederhana tersebut secara visual. Kita dapat menambahkan pesan console.log() pada fungsi Computed Property agar kita dapat melihat bahwa fungsi tersebut telah dijalankan:

computed: {
    pesanTerbalik() {
        console.log('Fungsi Computed telah dijalankan.');
        return this.pesan.split('').reverse().join('');
    },
}

Pada Template, kita dapat membuat Computed Property pesanTebalik beberapa kali:

<div id="aplikasi">
  <div class="card">
    <header class="card-header card-header-title">
      <span>Asli: </span>
      {{ pesan }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Dibalik: </span>
      {{ pesanTerbalik }}
    </header>
  </div>

  <div class="card">
    <header class="card-header card-header-title">
      <span>Dibalik: </span>
      {{ pesanTerbalik }}
    </header>
  </div>
 
  <div class="card">
    <header class="card-header card-header-title">
      <span>Dibalik: </span>
      {{ pesanTerbalik }}
    </header>
  </div>
</div>

Ketika kita membukanya pada Browser, kita akan melihat pesan console.log() yang hanya ditampilkan sekali:

Console Log

Pertama kali properti pesanTerbalik dihitung, nilainya akan di-cache. Dengan setiap panggilan lain yang menghasilkan nilai pesanTerbalik, properti pesan tidak akan berubah, sehingga hasil yang ada di cache hanya dikembalikan tanpa menjalankan fungsi Computed lagi.

Jika kita mengulangi contoh yang sama tetapi dengan memanggil Method beberapa kali, pesan console.log() akan dijalankan setiap kali Method tersebut dideklarasikan.

Kesimpulannya, meskipun Method dapat digunakan sebagai pengganti dari Computed Property - Computed Property pada dasarnya harus digunakan ketika kita bermaksud menghitung nilai dari properti data. Caching dapat membantu aplikasi yang kita buat agar dapat memiliki kinerja yang baik ketika aplikasi tersebut memiliki properti yang tak terhitung jumlahnya.

Berikut adalah daftar perbedaan utama antara Method dan Computed Property:

MethodComputed Property
Fungsi yang harus dipanggilDimaksudkan untuk menghitung data yang sudah ada
Dapat memiliki Parameter yang dilewatiTidak dapat memiliki Parameter yang dilewati
Dijalankan/Dievaluasi ketika di panggil ulangDi Cache berdasarkan Dependency
Tidak dimaksudkan sebagai propertyHarus digunakan sebagai property

Berikut adalah aturan yang baik untuk diikuti:
  • Gunakan Method ketika ingin menanggapi perubahan seperti Mengklik tombol, mengirim Form, dll.
  • Gunakan Computed Property untuk manipulasi data seperti membuat Array yang diurutkan dari array yang belum diurutkan, dll.

Mungkin cukup sampai disini pembahasan kita kali ini, kita akan melihat contoh properti pada bagian yang akan datang. Terimakasih.
Share:
Label:
Yasya El Hakim
404 Not Found!
Comments