Weekly Vue News #108 - Manually Stop Watcher

View and discuss online,

Weekly Vue News #108 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 Tip: Manually Stop Watcher

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 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:

Component.vue 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:

Component.vue 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:

Component.vue 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.

Quote of the week

Curated Vue & Nuxt Content

📕 Vue 3 for React developers: Side-by-side comparison with demos 👉🏻 The goal of this article is to offer React developers a quick introduction to Vue development. blog.logrocket.com

📕 Create a Modern Application with Django and Vue 👉🏻 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. blog.devgenius.io

Fun

Curated Web Development Content

📕 JavaScript Tips to Help You Build Better Web Development Projects 👉🏻 This article will teach you some advanced JS concepts like Template Interpolation, Unary Plus, the Spread Operator, Destructuring, and Math Object methods. www.freecodecamp.org

📕 The downsides of microservices architecture 👉🏻 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. www.infoworld.com

📕 JavaScript waitFor Polling 👉🏻 A quick look into JavaScript's waitFor 👉🏻 An async function that allows developers to provide a condition function, polling interval, and optional timeout. davidwalsh.name

📕 Just normal web things 👉🏻 As our applications get more and more complex, sometimes the simple, expected behaviors get overruled. heather-buchel.com

🛠️ screenlog.js 👉🏻 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. github.com

🛠️ Knip 👉🏻 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. github.com

🛠️ continue 👉🏻 Continue is an open-source VS Code extension that brings the power of ChatGPT to your IDE github.com

🛠️ little-rat 👉🏻 Small chrome extension to monitor other extensions' network calls github.com

Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator)

Share via Facebook Twitter LinkedIn

Unsubscribe from this newsletter Holzapfelkreuther Str. 19, 81375 Munich, Germany