Mengenal Watchers dan Computed Properties di Vue.js

Salah satu kekuatan utama Vue.js adalah kemampuannya dalam menangani data secara reaktif. Ketika data berubah, tampilan (DOM) akan ikut diperbarui secara otomatis tanpa kita harus menyentuh DOM secara manual. Namun, dalam banyak kasus, kita tidak hanya ingin menampilkan data—kadang kita perlu melakukan transformasi data (seperti membuat nilai turunan), atau menjalankan aksi tertentu saat data berubah (seperti melakukan fetch ulang atau validasi).

Vue.js menyediakan dua fitur yang sangat penting untuk kebutuhan tersebut: Computed Properties dan Watchers.

• Computed Properties digunakan untuk membuat nilai turunan dari state (data) yang akan diperbarui secara otomatis saat dependensinya berubah.
• Watchers digunakan ketika kita ingin menjalankan kode tertentu secara imperatif sebagai respons atas perubahan suatu data.

Dalam artikel ini, kita akan membahas masing-masing fitur tersebut secara rinci, mulai dari konsep, penggunaan, hingga contoh kasus praktisnya dalam Vue 3 dengan script setup.

---

Computed Properties: Menghitung Nilai Turunan Secara Efisien

Computed properties adalah properti yang dihitung berdasarkan data yang sudah ada. Mereka di-cache dan hanya akan dievaluasi ulang ketika data yang menjadi dependensinya berubah.

Salah satu contoh paling umum adalah ketika kita memiliki firstName dan lastName, lalu ingin menampilkan fullName tanpa perlu menghitung ulang setiap kali komponen dirender.

Contoh Penggunaan Computed

Mari kita lihat contoh berikut yang menunjukkan cara penggunaan computed dalam Vue 3:

<template>
  <div>
    <p>Nama Depan: <input v-model="firstName" /></p>
    <p>Nama Belakang: <input v-model="lastName" /></p>
    <p><strong>Nama Lengkap:</strong> {{ fullName }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('');
const lastName = ref('');

const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`.trim();
});
</script>

Penjelasan

• firstName dan lastName adalah reactive state yang diikat dengan v-model pada input.
• fullName adalah computed property yang akan secara otomatis menghasilkan nama lengkap.
• Karena bersifat computed, fullName hanya dihitung ulang ketika firstName atau lastName berubah. Jika tidak ada perubahan, nilainya akan tetap sama dan tidak dihitung ulang — ini lebih efisien dibandingkan fungsi biasa.

---

Watchers: Menyaksikan Perubahan dan Bereaksi Secara Imperatif

Kadang, kita butuh menjalankan aksi tertentu setiap kali data berubah, misalnya:

• Menyimpan data ke local storage
• Memanggil API
• Menjalankan validasi yang memerlukan proses tambahan

Untuk kebutuhan seperti ini, Vue menyediakan watch.

Contoh Dasar Watcher

<template>
  <div>
    <input v-model="searchQuery" placeholder="Cari..." />
    <p>Kamu mencari: {{ searchQuery }}</p>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

const searchQuery = ref('');

watch(searchQuery, (newValue, oldValue) => {
  console.log(`Query berubah dari "${oldValue}" menjadi "${newValue}"`);
  // Di sini kamu bisa lakukan fetch atau filter data
});
</script>

Penjelasan

• Fungsi watch() menerima dua parameter:
  1. Data yang akan dipantau (searchQuery)
  2. Fungsi callback yang akan dipanggil saat nilai berubah
• Fungsi callback menerima dua argumen: newValue dan oldValue
• Kita bisa meletakkan logika tambahan di dalam callback, seperti fetch data dari server berdasarkan kata kunci.

---

Watch vs Computed: Kapan Menggunakan yang Mana?

Fitur	Gunakan Saat
computed	Kamu ingin menampilkan nilai yang diturunkan dari state, seperti fullName.
watch	Kamu ingin melakukan aksi tertentu ketika data berubah, seperti fetch ulang.

Analogi Sederhana

• computed: seperti kolom “Total Harga” di Excel yang otomatis menjumlahkan “Harga x Jumlah”.
• watch: seperti alarm yang berbunyi ketika nilai di kolom “Stok” turun di bawah 10.

---

Contoh Gabungan: Validasi Panjang Password

Mari kita lihat contoh yang menggunakan watch dan computed sekaligus. Misalnya, kita ingin mengecek kekuatan password dan memberikan peringatan jika terlalu pendek.

<template>
  <div>
    <input v-model="password" placeholder="Masukkan password" type="password" />
    <p v-if="passwordStrength === 'lemah'" style="color: red;">
      Password terlalu pendek!
    </p>
    <p v-else style="color: green;">
      Password cukup kuat.
    </p>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const password = ref('');

const passwordStrength = computed(() => {
  return password.value.length >= 6 ? 'kuat' : 'lemah';
});

watch(password, (val) => {
  console.log(`Password diubah menjadi: ${val}`);
});
</script>

Penjelasan

• passwordStrength dihitung menggunakan computed, berdasarkan panjang password.
• watch digunakan untuk melakukan logging setiap kali password berubah — ini bisa diganti dengan aksi lain seperti menyimpan ke localStorage.

---

Vue.js menawarkan dua alat yang sangat berguna untuk menangani data secara reaktif:

• Computed Properties memungkinkan kita membuat nilai turunan dari state secara efisien.
• Watchers memungkinkan kita menanggapi perubahan data secara imperatif dengan menjalankan aksi tambahan.

Dengan memahami perbedaan dan waktu penggunaan keduanya, kamu bisa membangun aplikasi yang lebih reaktif, modular, dan mudah dikelola.