#title Weekly Vue News #108 - Manually Stop Watcher #preview Ready for your weekly Vue & Nuxt dose?
Manually Stop Watcher
Hi 👋
this is future me writing to you from the past.
I'm currently on vacation and will be back next week. I hope you enjoy this issue and I'll see you next week.
Have a lovely week ☀️
To support me:
- 😘 Recommend the newsletter to your friends: it really helps!
- 💸 Sponsor the newsletter
- 🧵 Retweet the latest Twitter thread
- 📨 Reply to this email: feedback is welcome
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:
1 <script setup>
2 import { watchEffect } from 'vue'
3
4 watchEffect(() => {})
5 </script>
However, if you create a watcher asynchronously, it will not be stopped automatically:
1 <script setup>
2 import { watchEffect, ref } from 'vue'
3
4 const user = ref(null)
5
6 fetchUser().then((userResponse) => {
7 user.value = userResponse
8
9 // ⚠️ watchEffect is created asynchronously
10 watchEffect(() => {
11 if (user.value) {
12 // do something with the user
13 }
14 })
15 })
16 </script>
In this case, you can manually stop the watcher by calling the stop function that is returned by watchEffect:
1 <script setup>
2 import { watchEffect, ref } from 'vue'
3
4 const user = ref(null)
5 let unwatch = null
6
7 fetchUser().then((userResponse) => {
8 user.value = userResponse
9 unwatch = watchEffect(() => {
10 if (user.value) {
11 // do something with the user
12 }
13 })
14 })
15
16 const stopWatcher = () => {
17 unwatch()
18 }
19 </script>
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:
1 <script setup>
2 import { watchEffect, ref } from 'vue'
3
4 const user = ref(null)
5
6 fetchUser().then((userResponse) => {
7 user.value = userResponse
8 })
9
10 watchEffect(() => {
11 if (user.value) {
12 // do something with the user
13 }
14 })
15 </script>
This way, the watcher is automatically stopped and you don't need to worry about stopping the watcher yourself.
| 👉🏻 The goal of this article is to offer React developers a quick introduction to Vue development. |
| 👉🏻 In this tutorial, you'll learn how to create a modern single-page application using Django as the backend, Vue as the frontend, and GraphQL as the API manipulation language. |
| 👉🏻 This article will teach you some advanced JS concepts like Template Interpolation, Unary Plus, the Spread Operator, Destructuring, and Math Object methods. |
| 👉🏻 Microservices came in with a great deal of momentum a few years ago, but now we’re seeing their drawbacks for applications on cloud platforms. |
| 👉🏻 A quick look into JavaScript’s waitFor |
| 👉🏻 An async function that allows developers to provide a condition function, polling interval, and optional timeout. |
| 👉🏻 As our applications get more and more complex, sometimes the simple, expected behaviors get overruled. |
| 👉🏻 This tool brings console logs onto the page without needing to explicitly open the Developer Tools menu. |
| 👉🏻 It can be handy if you have ever struggled to fit your website and browser developer console in the same window. |
| 👉🏻 Knip finds unused files, dependencies and exports in your JavaScript and TypeScript projects. |
| 👉🏻 Less code and dependencies lead to improved performance, less maintenance and easier refactorings. |
| 👉🏻 Continue is an open-source VS Code extension that brings the power of ChatGPT to your IDE |
| 👉🏻 Small chrome extension to monitor other extensions' network calls |
Until next week,
Holzapfelkreuther Str. 19, 81375 Munich, Germany
