What is the difference between watch and watchEffect in Vue 3?

Question

Accepted Answer

**watch** — explicit dependencies, access to old value. **watchEffect** — auto-tracked.

```typescript
import { ref, watch, watchEffect } from "vue"

const count = ref(0)
const name = ref("John")

// watch - explicit
watch(count, (newVal, oldVal) => {
    console.log(`Count: ${oldVal} -> ${newVal}`)
})

// watchEffect - auto-tracked
watchEffect(() => {
    console.log(`Count: ${count.value}, Name: ${name.value}`)
})
```

**Key differences:**
- **watch** — lazy, explicit sources.
- **watchEffect** — eager, auto-tracked.
- **watch** — access to old value.
- **watchEffect** — simpler syntax.

Vue.js: What is the difference between watch and watchEffect in Vue 3?