Vue Tip: watch() vs. watchEffect()

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:

1<script>
2// The callback is called whenever 'refA' changes
3watch(refA, () => {
4  console.log(refA.value)
5  console.log(refB.value)
6})
7</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:

1<script>
2// The callback is called immediately, and whenever 'refA' or 'refB' changes
3watchEffect(() => {
4  console.log(refA.value)
5  console.log(refB.value)
6})
7</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().