Vue 3 Composition API - watchEffect vs. watch

Question

So I have been learning the Vue Composition API and was wondering what the difference between watchEffect and watch is. Watch says it's the same as the Vue 2 watch, so I'm guessing watchEffect is like the 2.0 of that? I'm wondering if there is any specific cases where one would have great advantages over the other like in the case of stopping the watchEffect and then reactivating it instead of using a boolean in a regular watch... or are they just basically different ways of writing the same thing.

Thanks!

Reference:

watcheffect: https://vue-composition-api-rfc.netlify.com/api.html#watcheffect

watch: https://vue-composition-api-rfc.netlify.com/api.html#watch

Answer 1

watchEffect seems to be a simplified watch and the main differences are

• Only accepts a function
  • watch can accept either a function or one or more reactive properties.
• Runs immediately when defined and when reactive dependencies change
  • watch only runs when reactive dependencies change

Answer 2

I would use:

• watchEffect when I want to watch multiple reactive properties and I don't care about old values
• watch when I want to watch one specific reactive properties and I may want old value

Note, above is what I would use them for, but may not be their only usage.

Also found in docs regarding the difference:

Compared to watchEffect, watch allows us to:

Perform the side effect lazily;
Be more specific about what state should trigger the watcher to re-run;
Access both the previous and current value of the watched state.

Source: https://composition-api.vuejs.org/api.html#watch