Catatan Belajar Vue : Computed Properties

Saat pertama kali membaca mengenai computed saya bingung, gak tahu sebenarnya fungsi utamanya untuk apa. Contohnya seperti ini :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Computed</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
    
        <p>
            String : {{ string }}
        </p>
        <p>
            String : {{ anotherString }}
        </p>
      
    </div>
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        string: "Lorem Ipsum"
      },
      computed: {
        anotherString(){
          return "Lorem ipsum"
        }
      }
     })
  </script>
</html>

Yang satu langsung akses ke properti string dalam data yang satu lagi ngambil dari fungsi anotherString()di dalam computed, sekilas mending pakai cara yang pertama, lebih singkat juga kodenya, toh hasilnya sama.

Tapi kalau sama kenapa computed diciptakan ? Bayangan saya waktu pertama kali mungkin kalau pake computed bisa ada logic pemograman di dalamnya sebelum ditampilkan di layar. Mungkin itu benar – dan mungkin juga salah – tapi ada beberapa hal yang bisa dimanfaatkan dari si computed.

Pertama adalah reaktivitas, jadi nilai si computed ini akan berubah secara otomatis apabila sumber data utama berubah. Contoh skrip di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Computed</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
  </head>
  <body>
  
    <div id="app">
      <button v-on:click="increment">
        Tambahkan Jumlah
      </button>
        <p>
            Harga : {{ harga }}
        </p>
        <p>
            jumlah : {{ jumlah }}
        </p>
        <p>
            total : {{ total }}
        </p>
    </div>
     
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        harga: 2500,
        jumlah : 1
      },
      methods: {
        increment() {
          return this.jumlah++
        }
      },
      computed: {
        total(){
          return this.jumlah * this.harga
        }
      }
     })
  </script>
</html>

Di sana bisa dilihat nilai si “total” tergantung dari hasil perkalian jumlah dan harga, setiap jumlah bertambah otomatis computed diubah. Lalu terdengar bisikan pake methods juga bisa gak perlu computed.

Yang kedua adalah computed memiliki fungsi cache, jadi computed di proses kalau nilainya berubah kalau sama output-nya yang diakses ya cache. Contohnya skrip di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Computed</title>
    <script src="https://vuejs.org/js/vue.min.js"></script>
  </head>
  <body>
  
    <div id="app">
      <button v-on:click="count">
        Tambahkan Jumlah
      </button>
        <p>
            Harga : {{ harga }}
        </p>
        <p>
            jumlah : {{ jumlah }}
        </p>
        <p>
            total : {{ total }}
        </p>
        <p>
            total : {{ ctotal }}
        </p>
    </div>
     
  </body>
  <script>
   new Vue({
      el: '#app',
      data: {
        harga: 2500,
        jumlah : 1,
        total : ""
      },
      methods: {
        count() {
          console.log("methods diakses");
          this.total = this.jumlah * this.harga
        }
      },
      computed: {
        ctotal(){
          console.log("computed diakses");
          return this.jumlah * this.harga
        }
      }
     })
  </script>
</html>

Di console log ketahuan computed diakses hanya sekali karena nilai tidak berubah, namun pada methods tetap dilakukan meskipun nilai yang keluar sama.

Referensi :

https://vuejs.org/v2/guide/computed.html
http://masputih.com/2017/07/mengenal-vuejs-02
https://www.dumetschool.com/blog/tentang-computed-property-pada-vue-js
https://www.youtube.com/watch?v=cx2WnT_sckA&index=4&list=PL55RiY5tL51p-YU-Uw90qQH419BM4Iz07