Watchers — Vue

watch() — Mengamati Perubahan const query = ref("") watch(query, (newVal, oldVal) => { console.log("Query berubah:", oldVal, "→", newVal) }) ---template--- {{ q

watch() — Mengamati Perubahan

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("Query berubah:", oldVal, "→", newVal)
})

---template---
<input v-model="query" />
<p>{{ query }}</p>

watchEffect() — Otomatis Track Dependencies

const count = ref(0)

watchEffect(() => {
  console.log("Count sekarang:", count.value)
})

---template---
<button @click="count++">{{ count }}</button>

watch = kamu pilih apa yang diamati. watchEffect = otomatis track semua reactive dependency di dalamnya.

Yang akan kamu pelajari