Version

3.0.0

Reproduction link

https://codesandbox.io/s/vue-next-issue-r05yq

Steps to reproduce

If i have a function which is use watch or watchEffect to do some subscription things, such as addEventListener.

And when I invoke it by events or directly, inside it is no active component instance, so it is don't have any lifecycle hook.

So how can I remove that effect ? I m very confuse it.

What is expected?

Side effect invalidation is working when there is no active component

What is actually happening?

Side effect invalidation is not working when there is no active component

watchEffect returns a function to stop effect so you can stop it manually

const stop = watchEffect(() => {
  /* ... */
})

// later
stop()

watchEffect returns a function to stop effect so you can stop it manually

const stop = watchEffect(() => {
  /* ... */
})

// later
stop()

yep... i knew that. sorry, the question is bad. I think what I actually want to ask is: in a function, how to know that the component calling this function is unmount. This function may be call by event or lifecycle hook. (cuz lifecycle hook is a function) That is my very confuse point.

Usually you would call watch() during setup() and not in some kind of callback to an event or something. What is the use case of this?

If you really have a situation where you have to call watch() outside of / after setup, then you can save the stop() function that watch() returns in some kind of variable and have an onUnMounted()`hook (caled during setup before) check that variable for any stop functions to run and run them.

I suggest to ask for more help on our discord server

@glitchboyl do you mean https://codepen.io/unbyte/pen/JjXmxpG ? stoping an effect manually also triggers onInvalidate so just stop it in onUnmounted hook.

@LinusBorg @unbyte thanks for answer, it is resolve my confuse.