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

watch — explicit dependencies. watchEffect — auto dependencies.

watch:

• Explicit sources.
• Old/new values.
• Lazy.

watchEffect:

• Auto tracking.
• No old value.
• Immediate.

1<script setup>
2import { ref, watch, watchEffect } from "vue"
3
4const query = ref("")
5
6watch(query, (n, o) => console.log(`${o} -> ${n}`))
7watchEffect(() => console.log(query.value))
8</script>

Key: watch for explicit, watchEffect for auto.