Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: watch() vs. watchEffect()

Vue Tip: watch() vs. watchEffect() Image
Script

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' changes watch(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' changes watchEffect(() => { 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 X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Use Fallthrough Attributes

A 'fallthrough attribute' is an attribute or v-on event listener that is passed to a component, but is not explicitly declared in the receiving component's props or emits. Common examples of this include class, style, and id attributes.

Vue Tip: Memoize a Sub-Tree of the Template Using v-memo

The v-memo directive is like a computed prop for the template.