Javascript is required
Weekly Vue News Logo
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 8px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #108 - Manually Stop Watcher #preview Ready for your weekly Vue & Nuxt dose?

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:

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:

1<script setup>
2import { watchEffect } from 'vue'
4watchEffect(() => {})

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

1<script setup>
2import { watchEffect, ref } from 'vue'
4const user = ref(null)
6fetchUser().then((userResponse) => {
7 user.value = userResponse
9 // ⚠️ watchEffect is created asynchronously
10 watchEffect(() => {
11 if (user.value) {
12 // do something with the user
13 }
14 })

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

1<script setup>
2import { watchEffect, ref } from 'vue'
4const user = ref(null)
5let unwatch = null
7fetchUser().then((userResponse) => {
8 user.value = userResponse
9 unwatch = watchEffect(() => {
10 if (user.value) {
11 // do something with the user
12 }
13 })
16const stopWatcher = () => {
17 unwatch()

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>
2import { watchEffect, ref } from 'vue'
4const user = ref(null)
6fetchUser().then((userResponse) => {
7 user.value = userResponse
10watchEffect(() => {
11 if (user.value) {
12 // do something with the user
13 }

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

Quote of the weekCurated 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.
πŸ“• 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.
FunCurated 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.
πŸ“• 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.
πŸ“• 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.
πŸ“• Just normal web things
πŸ‘‰πŸ» As our applications get more and more complex, sometimes the simple, expected behaviors get overruled.
πŸ› οΈ 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.
πŸ› οΈ 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.
πŸ› οΈ continue
πŸ‘‰πŸ» Continue is an open-source VS Code extension that brings the power of ChatGPT to your IDE
πŸ› οΈ little-rat
πŸ‘‰πŸ» Small chrome extension to monitor other extensions' network calls
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
Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
Make sure to stay up to date about new features, best articles and tools in the Vue & Nuxt ecosystem by subscribing to the newsletter.Get one email per week | 100% free
I will never share any of your personal data.
Β© 2023 All rights reserved.