Watchers di Vue

Kali ini kita akan belajar tentang watcher di Vue. Jadi, vue ini memiliki fitur untuk watchers bernama watch() function yang digunakan untuk meregistrasikan callback function yang akan di trigger secara otomatis jika terjadi perubahan state. Watch function ini secara default bersifat lazy, artinya, watch() function ini dipanggil hanya ketika ada perubahan pada state.

Kenapa kita butuh watchers? Nah, sebelumnya kita telah membuat input binding dengan vue. Tapi, input binding ini hanya melakukan sinkronisasi antara input dengan state. Nah, di tengah sinkronisasi, mungkin kita ingin menambahkan validasi input atau melakukan modifikasi. Jadi di sinilah peran watcher di vue. Dengan watch function kita bisa meregistrasikan state yang di binding dengan input, lalu kita tambahkan function tambahan. Untuk lebih jelasnya, mari kita perhatikan contoh sederhana berikut ini.

<script setup lang="ts">
import {ref, watch} from "vue";

const age = ref(0);
const errorAge = ref("");

watch(age, (newValue, oldValue) => {
  if (age.value > 100) {
    errorAge.value = "Age "+newValue+" is too big, previous age is "+oldValue+"";
  } else {
    age.value = newValue;
  }
});

</script>

<template>
  <form>
    <div>
      <label for="age">
        Age: <input type="text" id="age" v-model="age">
      </label>
      <span>{{errorAge}}</span>
    </div>
  </form>
</template>

<style scoped>
span {
  color: red;
}
</style>

Pada contoh di atas, kita punya state age. Kita menggunakan watchers di vue dengan cara membuat watch function dimana age menjadi parameter pertama, sedangkan arrow function sebagai parameter kedua. Arrow function memiliki parameter newValue dan oldValue. newValue adalah nilai yang akan dimasukkan ke dalam state, sedangkan oldValue adalah nilai yang ada pada state saat ini. Tampilan dari component di atas adalah sebagai berikut.

Sekarang mari kita cermati, apa yang dilakukan watchers di vue pada component tersebut. Jadi, ketika kita melakukan perubahan pada input age, nilai yang kita ketikkan akan masuk ke dalam watch function terlebih dahulu. Di watch function itulah kita melakukan perubahan nilai state. Jika kita hanya membuat function tanpa ada statement untuk mengubah nilai state maka state tidak akan berubah. Misalnya, kita hanya menulis watch(age (newValue, oldValue) => {}); tanpa ada deklarasi, maka state age tidak akan berubah sama sekali.

Mengubah Behavior Watchers di Vue

Jika kita perhatikan contoh sebelumnya, watchers di vue itu dipanggil ketika kita mencoba mengubah state dengan mengubah input age. Namun, kita bisa mengubah behavior (perilakunya). Kita bisa memanggil watch function saat pertama kali component dirender dengan menambahkan parameter object dengan nilai {immediate: true} setelah arrow function. Perhatikan perbaikan watch function berikut ini.

watch(age, (newValue, oldValue) => {
  if (age.value > 100) {
    errorAge.value = "Age "+newValue+" is too big, previous age is "+oldValue+"";
  } else if (age.value == 0) {
    errorAge.value = "Age must be defined."
  }
}, {
  immediate: true
});

Karena kita menambahkan immediate: true, maka watch function tersebut akan dijalankan saat kita refresh page. Nah, teman-teman bisa coba untuk mengubah immediate menjadi false. Dengan begitu saat direfresh maka aplikasi kita tidak akan menampilkan keterangan “Age must be defined.”. Jika teman-teman menghapus parameter behavior tersebut maka hasilnya juga akan sama dengan immediate false karena memang default behavior dari watch function adalah immediate false.

Penggunaan watchEffect

Sebenarnya ada cara yang lebih sederhana untuk melakukan watchers di vue, yaitu menggunakan watchEffect function. Dengan watchEffect kita tidak perlu lagi harus menentukan state mana yang akan kita watch, watchEffect secara otomatis akan mendeteksi state mana yang mengalami perubahan. Oke, mari kita perbaiki contoh sebelumnya dengan menambah state baru. Contoh di bawah ini hanya potongan saja ya, nanti teman-teman bisa melengkapinya sendiri.😄

watchEffect(() => {
  if (age.value > 100) {
    errorAge.value = "Age is too big, maximum age is 100";
  } else if (age.value == 0) {
    errorAge.value = "Age must be defined."
  } else {
    errorAge.value = "";
  }

  if (name.value.length < 5) {
    errorName.value = "Name too short, minimum length is 5";
  } else {
    errorName.value = "";
  }
});

Perhatikan contoh di atas, sekarang kita punya 2 state utama, yaitu age dan name. Vue akan secara otomatis membaca perubahan pada kedua state tersebut. Bedanya lagi, pada watchEffect kita tidak menambahkan newValue dan oldValue. Jadi setiap kali ada perubahan pada input maka state juga secara otomatis akan berubah. Selain itu default nilai immediate di watchEffect bernilai true.

Nah, demikianlah, sedikit penjelasan tentang penggunaan watchers di Vue. Untuk lebih jelasnya lagi, teman-teman bisa mengakses dokumentasi tentang watchers ini di situs resmi Vue. Selamat mencoba, dan semoga tulisan ini bermanfaat untuk kita semua.🤲