Memahami Properti Watchers pada Vue
Pada seri sebelumnya, kita telah membahas cara kerja Method dan Computed Properties. Pada seri ini, kita akan membahas Properti lain yang disebut dengan istilah Watchers (Watch).
Pada seri sebelumnya, kita telah membahas cara kerja Method dan Computed Properties. Pada seri ini, kita akan membahas Properti lain yang disebut dengan istilah Watchers (Watch).
Properti Watch pada dasarnya dapat kita gunakan untuk melakukan suatu hal sebagai reaksi terhadap perubahan data tertentu.
Untuk melihat contoh dari Wathcers, kita akan membuat aplikasi sederhana yang berisi dua Input - Input pertama untuk mengatur jarak dalam satuan kilometer dan yang kedua dalam satuan meter:
Saat pengguna memasukkan suatu informasi ke dalam salah satu input, kita akan membuat input lainnya untuk secara otomatis menampilkan nilai yang sama pada unit satuannya sendiri. Misalnya, ketika pengguna mengetik angka 1 ke dalam input KM - input M secara otomatis akan menampilkan nilai 1000 (1 KM === 1000 M).
Untuk membuatnya, kita harus membuat Vue instance yang berisi properti data km dan m yang keduanya diinisialisasikan dengan nilai 0.
new Vue({
el: '#aplikasi',
data: {
km: 0,
m: 0
}
});
Kita akan menggunakan Directive v-model untuk mengikat properti data km dan m ke dalam input yang terpisah serta menentukan Placeholder dan mendeklarasikan type="number" pada input. Berikut adalah Template yang akan kita buat:
./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="field">
<label class="label">KM</label>
<input v-model="km" class="input" type="number" placeholder="Masukkan satuan KM">
</div>
<div class="field">
<label class="label">M</label>
<input v-model="m" class="input" type="number" placeholder="Masukkan satuan M">
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="./main.js"></script>
</body>
</html>
Untuk dapat menampilkan hasil yang kita inginkan - yaitu agar satu input yang diperbarui sebagai respon terhadap perubahan lainnya - kita dapat menggunakan properti Watch. Untuk melihat (Watch) perubahan pada input KM, kita harus mendeklarasikan properti Watch untuk melihat nilai data km ke dalam instance:
new Vue({
el: '#aplikasi',
data: {
km: 0,
m: 0
},
watch: {
km() {
// setiap kali km berubah, fungsi ini berjalan
},
}
});
Karena kita juga ingin input KM diperbarui sebagai respon terhadap perubahan dalam input M, kita juga akan mendeklarasikan Watcher pada nilai data m:
new Vue({
el: '#aplikasi',
data: {
km: 0,
m: 0
},
watch: {
km() {
// setiap kali km berubah, fungsi ini berjalan
},
m() {
// setiap kali m berubah, fungsi ini berjalan
},
}
});
Fungsi yang kita deklarasikan dalam properti Watch akan dijalankan setiap kali nilai data km atau m telah diubah.
Properti Watch akan secara otomatis menyediakan Payload dari nilai baru saat terdapat perubahan:
watch: {
property(nilaiBaru, nilaiLama) {
// ...
}
}
Untuk aplikasi yang akan kita buat - kita tidak memerlukan akses ke nilai lama, nilai baru akan sama dengan properti Watcher. Maka dari itu, kita tidak perlu menggunakan salah satu dari parameter tersebut.
Saat setiap fungsi Watch berjalan, kita akan memperbarui properti data lainnya dengan mengalikan atau membagi properti Watch dengan 1000:
./main.js
new Vue({
el: '#aplikasi',
data: {
km: 0,
m: 0
},
watch: {
km() {
this.m = this.km ? this.km * 1000 : 0;
},
m() {
this.km = this.m ? this.m / 1000 : 0;
}
}
});
Kita akan menggunakan operator ternary untuk memperbarui nilai input Non-Watcher menjadi 0 jika properti Watch tidak valid. Sekarang, setiap kali terdapat nilai yang dimasukkan ke dalam input; input lainnya akan diperbarui untuk dapat menampilkan perubahannya:
Menarik bukan? Meskipun hal tersebut dapat bekerja dengan sangat baik, hal yang perlu ditanyakan adalah - apakah kita membutuhkan Watcher untuk melakukan apa yang baru saja kita lakukan? Mari kita simak jawabannya.
Watcher vs Computed Property pada Vue
Kita dapat membuat aplikasi yang sama tanpa menggunakan Watcher hanya dengan menggunakan Computed Properties. Kita juga sudah tahu bahwasannya Computed Property dapat digunakan untuk menghitung properti baru dari properti data yang sudah ada. Tanpa terdapat perubahan pada Template yang kita buat, kita dapat memasukkan nilai m dari data objek dan menghitungnya dari nilai km:
ew Vue({
el: '#aplikasi',
data: {
km: 0
},
computed: {
m() {
return this.km * 1000;
}
}
});
Ketika nilai km berubah, nilai m akan diperbarui. Tetapi hal tersebut hanya bekerja pada satu arah. Lalu, bagaimana kita bisa memperbarui properti data km ketika nilai m diubah? Meskipun hal tersebut bukanlah cara standar dalam menggunakan Computed Property, kita juga dapat mengonfigurasi Computed Property untuk menjadi Setter dan Getter:
new Vue({
el: '#aplikasi',
data: {
km: 0
},
computed: {
m() {
get() {
// get (mengambil) nilai dari m
},
set() {
// ketika m berubah - fungsi ini akan berjalan
}
}
}
});
Jika kita memilih untuk mendeklarasikan fungsi get() dan set() dalam Computed Property, fungsi get() akan menjadi tempat kita menghitung nilai properti tersebut dan fungsi set() akan menjadi fungsi yang berjalan setiap kali Computed Property berubah.
Dalam hal ini, kita akan menggunakan fungsi get() untuk mendapatkan nilai m seperti yang telah kita lakukan sebelumnya. Dalam fungsi set(), kita akan menghitung berapa nilai km jika nilai m berubah. Kita juga akan menggunakan Payload dari fungsi set() yang merupakan nilai baru dari properti m pada perubahan untuk menentukan berapa nilai km nantinya:
./main2.js
new Vue({
el: '#aplikasi',
data: {
km: 0
},
computed: {
m: {
get() {
return this.km * 1000;
},
set(nilaiBaru) {
this.km = nilaiBaru/1000;
}
}
}
});
Sekarang, aplikasi yang kita buat akan berfungsi seperti yang kita diharapkan! Ketika satu input berubah, input lainnya akan diperbarui.
Bisakah kita selalu menggunakan Computed Property sebagai pengganti dari Watcher? Tidak. Dalam berbagai kasus, kalian mungkin perlu menggunakan properti Watch tertentu. Pada Dokumentasi Vue, "[Watcher] paling berguna ketika kalian ingin melakukan operasi Asynchronous atau Expensive Operation dalam merespon perubahan data". Namun, dalam berbagai hal juga, Watcher cenderung terlalu sering digunakan di tempat yang mungkin lebih tepat untuk menggunakan Computed Property.
Mungkin cukup sampai disini dulu pembahasan kita kali ini. Pada bagian selanjutnya, kita akan membahas beberapa perbedaan Lifecycle dari Vue Instance sebelum akhirnya membahas Komponen Vue. Semoga artikel ini bermanfaat dan terimakasih.