Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Manually Stop Watcher

Vue Tip: Manually Stop Watcher Image
Script

Vue automatically stops watchers (watch and watchEffect) when the component is unmounted if they are created synchronously in <script setup> or setup().

The following watcher will automatically be stopped if Component.vue is unmounted:

Component.vue
<script setup> import { watchEffect } from 'vue' watchEffect(() => {}) </script>

However, if you create a watcher asynchronously, it will not be stopped automatically:

Component.vue
<script setup> import { watchEffect, ref } from 'vue' const user = ref(null) fetchUser().then((userResponse) => { user.value = userResponse // ⚠️ watchEffect is created asynchronously watchEffect(() => { if (user.value) { // do something with the user } }) }) </script>

In this case, you can manually stop the watcher by calling the stop function that is returned by watchEffect:

Component.vue
<script setup> import { watchEffect, ref } from 'vue' const user = ref(null) let unwatch = null fetchUser().then((userResponse) => { user.value = userResponse unwatch = watchEffect(() => { if (user.value) { // do something with the user } }) }) const stopWatcher = () => { unwatch() } </script>

Note

You should prefer creating watchers synchronously and only in rare cases create them asynchronously.

Unstopped watchers can lead to memory leaks and unexpected behavior.

In our example, we could create the watcher synchronously and watch the user ref instead:

Component.vue
<script setup> import { watchEffect, ref } from 'vue' const user = ref(null) fetchUser().then((userResponse) => { user.value = userResponse }) watchEffect(() => { if (user.value) { // do something with the user } }) </script>

This way, the watcher is automatically stopped and you don't need to worry about stopping the watcher yourself.

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: Dynamic Return Values in Composables

FIXME

Vue Tip: Simple State Management With Composition API

Learn how you can use Composition API for a simple state management solution which you can use instead of Pinia.