Search code examples
javascriptwatchreactivevuejs3

Would watch() in Vue3 stop automatically at component unmounted?

According to Vue3 Doc, watchEffect will stop when a component is unmounted.

When watchEffect is called during a component's setup() function or lifecycle hooks, the watcher is linked to the component's lifecycle and will be automatically stopped when the component is unmounted.

Does watch has the same behavior in term of automatically stoppage? Thanks!

Solution

  • Watchers declared synchronously inside setup() or are bound to the owner component instance, and will be automatically stopped when the owner component is unmounted. In most cases, you don't need to worry about stopping the watcher yourself.

    Src: https://vuejs.org/guide/essentials/watchers.html#stopping-a-watcher

    So the answer seems like, yes if you declare the watcher synchronously, and no if you declare it asynchronously.

    It looks like watch()/watchEffect() return unwatch() functions that you have to call to stop asynchronously created watchers.

    PS
    This was mainly just a follow-up on @User28. The link in your comment was outdated but I couldn't edit it.