[Vue] Watch and WatchEffect

Watch

Let’s look at another simple example using our composition API. Here’s some code that has a simple search input box, uses the search text to call an API, and returns the number of events that match the input results.

<template><div>Search for <input v-model="searchInput" /> <div><p>Number of events: {{ results }}</p></div></div>
</template>
<script>
import { ref } from "@vue/composition-api";
import eventApi from "@/api/event.js";export default {setup() {const searchInput = ref("");const results = ref(0);results.value = eventApi.getEventCount(searchInput.value);return { searchInput, results };}
};
</script>

With this code, here what happens when we use the form:

As you can see, it doesn’t seem to be working. This is because our API calling code, specifically results.value = eventApi.getEventCount(searchInput.value); is only getting called once, during the first time setup() is run. It doesn’t know to fire again, when our searchInput gets updated.

Solution: watchEffect

To fix this we need to use watchEffect. This will run our function on the next tick while reactively tracking its dependencies, and re-run it whenever the dependencies have changed. Like so:

setup() {const searchInput = ref("");const results = ref(0);watchEffect(() => {results.value = eventApi.getEventCount(searchInput.value);});return { searchInput, results };
}

So the first time this gets run it uses reactivity to start tracking searchInput, and when it gets updated it will re-run our API call which will update results. Since results is used in our template our template will be re-rendered.

If I want to be more specific as to which source I want to watch for changes, I can use watch instead of watchEffect, like so:

watch(searchInput, () => {...
});

Also, if I need access to the new value and old value of the item being watched I can write:

watch(searchInput, (newVal, oldVal) => {...
});

Watching Multiple Sources

If I want to watch two Reactive References I can send them inside an array:

watch([firstName, lastName], () => {...  
});

Now if either are changed, the code inside will re-run. I can also get access to both of their old and new values with:

watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {...   
});

 

Watch is Lazy

setup() {const searchInput = ref("");const results = ref(0);watch(searchInput, () => {results.value = eventApi.getEventCount(searchInput.value);});return { searchInput, results };
}

We can see that Number of events in page starts with empty

This is mainly due to watchis lazy, if you want it run immediately, you can do 

setup() {const searchInput = ref("");const results = ref(0);watch(searchInput, () => {results.value = eventApi.getEventCount(searchInput.value);}, {immediate: true});return { searchInput, results };
}