Watcher pada Vue.js.

Sekarang mari kita bahas lebih mendalam mengenai fungsi Watcher pada Vue.js.

Kita harus selalu berusaha agar properti komputasi menjadi fungsi murni, dan menghindari mutasi apa pun. Namun, dalam kasus yang jarang terjadi, ketika kita harus melakukan efek samping, misalnya mutasi pada DOM tree atau perubahan status lainnya, fungsi watcher hadir untuk membantu solusi permasalahan tersebut.

Beberapa poin penting yang perlu diingat:

1. Nama Watcher harus sama dengan data field yang ingin Anda pantau, sehingga Anda dapat memantau satu data field dalam satu waktu.

2. Watcher menggunakan 2 argumen, newValue dan oldValue, yang dengannya Anda dapat melakukan serangkaian tindakan.

Konfigurasi yang ada pada watcher:

1. deep

2. flush

3. immediate

Kapan sebaiknya menggunakan computed vs. watcher?

1. Gunakan properti computed ketika Anda ingin:

melakukan komputasi berdasarkan bidang data apa pun.

membuat bidang data baru berdasarkan komputasi yang juga dapat digunakan untuk tujuan lain.

2. Gunakan watcher ketika Anda ingin:

memata-matai/mengamati/memantau nilai data apa pun.

melakukan mutasi DOM atau pembaruan data field.

Contoh skenario fungsi Watcher Vue.js:

1. Memantau status typing

2. Real-time converter (temperature, zona waktu)

3. Simple countdount timer

4. Menghentikan watcher

Referensi:

https://blog.logrocket.com/understanding-watchers-vue/

https://www.w3schools.com/vue/vue_watchers.php

https://docs.vuejs.id/v2/guide/computed

https://www.geeksforgeeks.org/javascript/vue-js-watchers/

https://srivastavaankita080.medium.com/vuejs-computed-watchers-explained-7b6416ebfa18