Subscribe on changes!

Clearing effect scope

avatar
Jul 31st 2021

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...
});
avatar
Jul 31st 2021

I would say you should stop it and create a new one. You can keep track of the parent if needed to attach the new scope to the parent. What is the actual use case of this?