Javascript is required
Mokkapps Logo

Vue Tip: watch() vs. watchEffect()

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Jun 22, 2022
1 min read
watch() vs. watchEffect() Image

We can use the watch() hook to trigger a callback whenever a piece of reactive state changes. It also enables us to access the previous value of the watched variables:

<script>// The callback is called whenever 'refA' changeswatch(refA, () => {  console.log(refA.value);  console.log(refB.value);})</script>

The watchEffect() hook works like the computed() hook or the computed option, but instead of returning a value, you use it to trigger side-effects:

<script>// The callback is called immediately, and whenever 'refA' or 'refB' changeswatchEffect(() => {  console.log(refA.value);  console.log(refB.value);})</script>

watchEffect() might seem superior to watch(), but if you only want to trigger the callback function when one or multiple specific variables change, you must use watch() instead of watchEffect().

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more content from me. Alternatively (or additionally), you can also subscribe to my newsletter.