Back
VueMediumNew

What is the difference between `watch()` and `watchEffect()`?

Explicit dependencies vs automatic dependency tracking

Ideal Answer

  • watch(): Watches one or more explicitly specified reactive sources and runs a callback when they change. It's lazy by default (doesn't run immediately) and gives access to both old and new values.
  • watchEffect(): Automatically tracks any reactive dependencies used inside its callback and re-runs whenever any of them change. It runs immediately on creation and doesn't expose old values.
JavaScript
watch(count, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

watchEffect(() => {
  console.log(count.value)
})

Use watch when you need precise control over dependencies or access to previous values; use watchEffect for simpler auto-tracked side effects.