Cara Menggunakan Watcher Di Vue JS
Pada seri awalnya, kita sudah membahas langkah kerja Metode dan Computed Properties. Pada seri ini, kita akan mengulas Property yang lain disebutkan dengan istilah Watchers (Watch).
Property Watch pada intinya bisa kita pakai untuk melakukan satu hal sebagai reaksi pada perubahan data tertentu.
Untuk melihat contoh dari Wathcers, kita akan membuat program simpel yang berisi dua Input - Input pertama untuk mengatur jarak dalam satuan kilometer dan yang kedua dalam satuan meter:
Saat pemakai masukkan satu info ke salah satunya input, kita akan membuat input yang lain untuk secara automatis tampilkan nilai yang serupa pada unit satuannya sendiri. Misalkan, saat pemakai menulis angka 1 ke input KM - input M secara automatis akan tampilkan 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 memakai Directive v-model untuk mengikat property data km dan m ke input yang terpisah dan tentukan Placeholder dan memberitahukan tipe="number" pada input. Berikut 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/[email protected]/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>Agar bisa menampilkan hasil yang kita harapkan - yaitu supaya satu input yang diperbaharui sebagai respon pada pengubahan yang lain - kita bisa memakai property Watch. Untuk melihat (Watch) perubahan pada input KM, kita harus memberitahukan property Watch untuk melihat nilai data km ke 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 property Watch akan dijalankan setiap nilai data km atau m sudah diganti.
Property Watch akan secara automatis menyediakan Payload dari nilai baru saat terdapat perubahan:
watch: {
property(nilaiBaru, nilaiLama) {
// ...
}
}Untuk program yang hendak kita buat - kita tidak membutuhkan akses ke nilai lama, nilai akan sama dengan property Watcher. Oleh karena itu, kita tak perlu memakai salah satunya dari parameter itu.
Saat tiap fungsi Watch berjalan, kita akan mengupdate property data yang lain dengan mengalikan atau membagikan property Watch dengan 1000:
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 memakai operator ternary untuk mengupdate nilai input Non-Watcher jadi 0 bila property Watch tidak benar. Saat ini, setiap ada nilai yang ditempatkan ke input; input yang lain akan diperbaharui agar bisa menampilkan perubahannya:
Menarik kan? Walau hal itu bisa bekerja dengan baik sekali, hal yang penting ditanyakan ialah - apa kita memerlukan Watcher untuk melakukan apa yang barusan kita kerjakan? Mari kita simak jawabnya.
Watcher vs Computed Properti pada Vue
Kita bisa membuat program yang serupa tanpa menggunakan Watcher cukup dengan menggunakan Computed Properties. Kita juga tahu bahwasannya Computed Properti bisa dipakai untuk hitung property baru dari property data yang telah ada. Tanpa ada perubahan pada Template yang kita buat, kita bisa masukkan nilai m dari data object dan menghitungnya dari nilai km:
ew Vue({
el: '#aplikasi',
data: {
km: 0
},
computed: {
m() {
return this.km * 1000;
}
}
}); Ketika nilai km berbeda, nilai m akan diperbaharui. Tapi hal itu cuma bekerja pada satu arah. Lantas, bagaimana kita dapat mengupdate property data km saat nilai m diganti? Walau hal itu bukan langkah standard dalam memakai Computed Property, kita dapat mengonfigurasikan Computed Property 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
}
}
}
});Bila kita memutuskan untuk mengumumkan fungsi get() dan set() dalam Computed Properti, fungsi get() bisa menjadi tempat kita hitung nilai property itu dan fungsi set() bisa menjadi fungsi yang berjalan setiap Computed Properti berbeda.
Dalam masalah ini, kita akan memakai fungsi get() untuk memperoleh nilai m sama seperti yang sudah kita kerjakan awalnya. Dalam fungsi set(), kita akan hitung berapakah nilai km bila nilai m berbeda. Kita akan memakai Payload dari fungsi set() yang disebut nilai baru dari property m pada perubahan untuk tentukan berapakah nilai km nantinya:
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.
Dapatkah kita selalu menggunakan Computed Property sebagai alternatif dari Watcher? Tidak. Dalam beragam kasus, kalian kemungkinan perlu menggunakan property Watch tertentu. Pada Dokumentasi Vue, "[Watcher] paling bermanfaat saat kalian ingin melakukan operasi Asynchronous atau Expensive Operation dalam memberi respon perubahan data". Tetapi, dalam beragam hal , Watcher condong sering dipakai di lokasi yang kemungkinan lebih pas untuk memakai Computed Properti.
Cukup sampai di sini dahulu ulasan kita kali ini. Pada bagian selanjutnya, kita akan mengulas beberapa ketidaksamaan Lifecycle dari Vue Instance sebelum akhirnya mengulas Elemen Vue. Mudah-mudahan artikel ini berguna dan terima kasih.