Computed Property pada Vue.js
Menurut pemahaman penulis tentang computed adalah pengolahan property-property / function / data yang ada pada computed property yang kemudian value tersebut tersimpan didalam cached. Nilai tersebut tidak akan berubah selama tidak terjadi perubahan reaktif.
untuk lebih mudah memahami anda dapat perhatikan kode berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>computed</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="computed">
<p> {{ pesan }} </p>
<p> {{ pesanTerbalik }} </p>
</div><script>
let vm = new Vue({
el: "#computed",
data: {
pesan: "hai"
},
computed: {
pesanTerbalik: function() {
return this.pesan.split('').reverse().join('')
}
}
})//perubahan reaktif yaitu binding data ke pesan dengan perintah
vm.pesan = "Hallo" </script></body>
</html>
sunber code : https://jsfiddle.net/muhammad_iqbal07/29k7und0/22/
output :
HalloollaH
sebelumnya kode diatas menghasilkan output:
haiiah
akan tetapi karena terjadi binding data pada pesan maka computed mengevaluasi value dan mengembalikan data yang telah diperbaharui.
Sekarang kita perhatikan kode berikutnya agar lebih memahami lebih lanjut mengenai computed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>penggunaan computed</title>
<!-- load vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<div id="computed">
<div class="form-group">
<label for="namaDepan">Nama Depan</label>
<input type="text" v-model="namaDepan" class="form-control">
</div>
<div class="form-group">
<label for="namaBelakang">Nama Belakang</label>
<input type="text" v-model="namaBelakang" class="form-control">
</div>
<div class="form-group">
<label> pemanggilan binding : {{ namaDepan }} {{namaBelakang}}</label> <br>
<label> menggunakan computed : {{ namaLengkap }} </label>
</div>
</div><script>
let vm = new Vue({
el: "#computed",
data: {
namaDepan: " ",
namaBelakang: " "
},
computed: {
namaLengkap: function() {
return this.namaDepan + " " + this.namaBelakang
}
}
})
</script></body>
</html>
sumber code : https://jsfiddle.net/muhammad_iqbal07/k369tf42/26/
output:
Pada saat kita merubah isi dari texbox diatas maka dengan bantuan computed property tidak perlu melakukan perubahan yang spesifik. Karna computed akan mengingat fungsi yang ada didalamnya untuk melakukan perubahan.
Lalu Apa dong bedanya computed dengan method
Pemahaman sederhananya adalah computed value pada computed tersimpan dalam cached, sedangkan method tidak.
Misalnya kita membuat program yang cukup besar dengan melakukan pemanggilang fungsi yang berulang-ulang sebanyak 10x maka computed hanya melakukannya satu kali saja. Sedangkan jika menggunakan method maka program akan menjalankan fungsi tersebut sebanyak 10x.
Mari kita lihat kode berikut ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>perbedaan computed dan method</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.gray {
background-color: gray;
}
</style>
</head>
<body>
<div id="computedMethod">
<h1>{{ title }}</h1>
<h3 class="gray">random nomor dari computed : {{ randomNomorComputed }}</h3>
<h3>random nomor dari method : {{ randomNomorMethod() }}</h3>
<h3 class="gray">random nomor dari computed : {{ randomNomorComputed }}</h3>
<h3>random nomor dari method : {{ randomNomorMethod() }}</h3>
<h3 class="gray">random nomor dari computed : {{ randomNomorComputed }}</h3>
<h3>random nomor dari method : {{ randomNomorMethod() }}</h3>
</div><script>
let vm = new Vue({
el: "#computedMethod",
data: {
title: "perbedaan computed dan method"
},
methods: {
randomNomorMethod: function() {
return Math.random()
}
},
computed: {
randomNomorComputed: function() {
return Math.random()
}
}
})
</script> </body>
</html>
kode sumber : https://jsfiddle.net/muhammad_iqbal07/w1dvb80u/23/
output :
Jika kita perhatikan value diatas perbedaannya adalah value dari computed tidak berubah ini dikarekan value tadi yang tersimpan dalam cached, maka setiap kali pemanggilan fungsi dengan computed akan ditampilkan value terakhir yang di-update. Tetapi tidak dengan method, pemanggilannya akan dilakukan sebanyak yang digunakan. Oleh karena itu datanya pun berubah-ubah.
Get dan Set Computed
Computed tidak hanya terdapat fungsi get, akan tetapi terdapat pula fungsi set.
kode dibawah ini akan menjelaskan contoh dari penggunaan get dan set pada computed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>penggunaan computed</title>
<!-- load vuejs -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></head>
<body>
<div id="computed">
<h1 class="text-center">{{ title }}</h1>
<div class="form-group">
<label for="namaDepan">Nama Depan</label>
<input type="text" v-model="namaDepan" class="form-control">
</div>
<div class="form-group">
<label for="namaBelakang">Nama Belakang</label>
<input type="text" v-model="namaBelakang" class="form-control">
</div>
<div class="form-group">
<label> menggunakan computed : {{ namaLengkap }} </label>
</div>
</div><script>
let vm = new Vue({
el: "#computed",
data: {
title: "Set and Set Computed",
namaDepan: "muhammad",
namaBelakang: "iqbal"
},
computed: {
namaLengkap: {
get: function() {
return this.namaDepan + " " + this.namaBelakang
},
set: function(nama) {
var setNama = nama.split(" ")
this.namaDepan = setNama[0]
this.namaBelakang = setNama[1]
}
}
}
})
<script></body>
</html>
sumber kode: https://jsfiddle.net/muhammad_iqbal07/baf5g1ex/10/
ouput
Demikianlah penjelasan tentang computed pada vue.js. Penggunaan computed sendiri akan terasa berguna pada aplikasi ketika kita membuat aplikasi dengan pemanggilan fungsi yang sama.
Untuk pemahamannya sendiri tentang computed diharapkan melihat beberapa contoh kode dari google. Sumbernya banyak banget.
