Memahami Watcher di Vue 3

Di Vue 3, pemrograman reaktif adalah inti dari membangun aplikasi dinamis dan interaktif. Watcher adalah salah satu alat paling kuat dalam sistem reaktif Vue, memungkinkan Anda merespons perubahan data secara real-time. Baik untuk validasi input, panggilan API otomatis, atau logika kustom saat data berubah, watcher memberikan fleksibilitas yang sangat berguna. Panduan ini membahas penggunaan watcher dari dasar hingga teknik lanjutan.

1. Apa itu Watcher?

Watcher memungkinkan pengembang menjalankan logika kustom ketika state reaktif berubah. Berbeda dengan properti terkomputasi yang menghasilkan nilai turunan, watcher digunakan untuk efek samping seperti panggilan API atau manipulasi DOM.

2. Dasar-dasar Watcher

<template>
  <input v-model="name" placeholder="Enter your name" />
  <p>Your name is: {{ name }}</p>
</template>

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

const name = ref('');

watch(name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});
</script>

• Argumen watch: sumber reaktif, callback, newValue, dan oldValue.

3. Watcher vs. Properti Terkomputasi

| Fitur | Watcher | Properti Terkomputasi | | - | | – | | Tujuan | Efek samping saat state berubah | Nilai turunan dari state | | Kasus Penggunaan | Panggilan API, tugas asinkron | Perhitungan, tampilan data | | Kinerja | Fleksibel, bisa lebih berat | Dioptimalkan, ringan |

• Gunakan properti terkomputasi untuk perhitungan data, watcher untuk efek samping.

4. Watcher Deep dan Immediate

• Deep: Mengawasi objek atau array bersarang.
• Immediate: Menjalankan callback segera setelah dibuat.

Contoh Deep:

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

const user = reactive({ profile: { name: 'John', age: 30 } });

watch(
  () => user.profile,
  (newVal) => console.log('Profile updated:', newVal),
  { deep: true }
);
</script>

Contoh Immediate:

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

const counter = ref(0);

watch(
  counter,
  (newVal) => console.log('Watcher triggered:', newVal),
  { immediate: true }
);
</script>

5. Mengawasi Referensi Reaktif

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

const counter = ref(0);
const state = reactive({ name: 'Alice' });

watch(counter, (newVal) => console.log('Counter updated:', newVal));
watch(() => state.name, (newVal) => console.log('Name updated:', newVal));
</script>

• Gunakan ref atau reactive agar data dapat dilacak oleh sistem reaktivitas Vue.

6. Praktik Terbaik

• Gunakan watcher hanya bila perlu; properti terkomputasi lebih ringan untuk derivasi nilai sederhana.
• Bersihkan watcher untuk menghindari kebocoran memori pada komponen panjang.
• Hindari efek samping yang tidak perlu; fokuskan watcher pada logika yang memang membutuhkan respons terhadap perubahan data.

7. Kesalahan Umum

• Mengawasi data non-reaktif atau primitif langsung tanpa ref/reactive.
• Menggunakan watcher deep berlebihan yang dapat memengaruhi performa.
• Mengabaikan pengelolaan operasi asinkron di dalam watcher.

8. Kesimpulan

Watcher di Vue 3 adalah alat yang fleksibel untuk merespons perubahan data secara langsung. Dengan memahami kapan dan bagaimana menggunakannya—termasuk opsi deep dan immediate—pengembang dapat menulis aplikasi yang responsif dan terstruktur. Bereksperimenlah dengan berbagai skenario untuk menguasai potensi watcher dalam proyek Vue 3 Anda.