Clearing effect scope
What problem does this feature solve?
The newly introduced effect scope provides a nice way to easily clean up effects outside of a Vue component, but there isn't any way to stop them while also clearing the effect scope for future use.
One use case for this would be if there's an effect that creates an effect scope and recreates it depending on a given expression, the problem is:
- Recreating the effect scope loses track of the parent scope
- Stopping the effect scope as is would keep the old cleanups, which would be called again on future stops.
- Clearing the effect scope by mutating properties is prone to errors and mistakes
What does the proposed API look like?
A clear
method that would stop current effects and clears the effect array, without detaching itself from parent scope.
import { effectScope } from '@vue/reactivity';
let scope = effectScope();
scope.run(() => {
// run effects...
});
scope.clear();
scope.run(() => {
// run effects again...
});