feat: add pause/resume methods for render function
#9206
Conversation
Size ReportBundles
Usages
|
Alfred-Skyblue
force-pushed
the
feat-effect
branch
from
d536488
to
5a279be
Compare
|
Before: Now:
|
|
This looks and sounds promising. Could you maybe elaborate on to what extend this is the same as what @BenceSzalai explained in #5386 (comment). I think this is what he calls 'level 5' right? Also you mentioned in #5386 (comment) that it's more difficult to achieve for |
|
The reason why v-show cannot be processed is because v-show is the data obtained during the update process. If we pause the execution of the effect, the element will never be re-displayed. |
posva
added
the
need guidance
Alfred-Skyblue
force-pushed
the
feat-effect
branch
from
2bd5dcd
to
9bda252
Compare
|
For |
Alfred-Skyblue
changed the title
pause/resume function to ReactiveEffectpause and resume methods for render function
Alfred-Skyblue
changed the title
pause and resume methods for render functionpause/resume methods for render function
|
Regarding the Related code: |
|
Can someone take a look at this PR? |
|
This feature allows me to use |
❌ Deploy Preview for vue-sfc-playground failed.
|
|
@posva Sorry for bothering you, could you take a look at this PR? |
| @@ -127,6 +127,8 @@ const KeepAliveImpl: ComponentOptions = { | |||
|
|
|||
| sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => { | |||
| const instance = vnode.component! | |||
| // on activation, resume the effect of the component instance and immediately execute the call during the pause process | |||
| instance.effect.resume(true) | |||
There was a problem hiding this comment.
I wonder if we could have a prop for KeepAlive to toggle this behavior (and default disabling it to keep existing behaviour)
There was a problem hiding this comment.
Yes, we can add a prop to preserve the original behavior.
There was a problem hiding this comment.
I added a lazy prop to control whether it should pause in the deactivated state.
| } else { | ||
| return super.run() | ||
| } | ||
| } |
There was a problem hiding this comment.
Love the compatibility of pausable effect. Since this is not bound to the runtime/dom, I wonder if this could be generally available in ReactiveEffect directly.
/cc @yyx990803 WDYT? Or do you think it deserves a dedicated RFC?
There was a problem hiding this comment.
As the addition of pause and resume methods in ReactiveEffect has significant implications for the existing codebase, I have initiated an RFC to discuss this feature.
/cc @yyx990803 @antfu
antfu
added
🍰 p2-nice-to-have
|
I have added the |
|
@Alfred-Skyblue Besides Keep-Alive, I guess this is something that could also be applicable here?: vuejs/rfcs#501 |
|
@ferferga The functionality has temporarily shifted to be implemented in #9651. I noticed your mention in the RFC that state changes in internal components during the execution of a Transition animation would disrupt the animation state. Regarding the solution you proposed:
Currently, we have implemented detachment for the scope of component instances in the EffectScope. Considering performance reasons, recursively pausing might lead to performance issues due to excessive depth. As of now, the solution I can think of is to manually call |
fixed #5386
To address the issue of
KeepAliverepeatedly executing theeffectin thedeactivatestate, I have addedpauseandresumemethods toReactiveEffectfor pausing and resuming the execution of theeffect. Currently, it is used in theKeepAlivecomponent. When the component is in thedeactivatedstate, it pauses the execution of theeffectand keeps track of whether it was called during the pause. When the component is in theactivatedstate, it resumes the execution of theeffectand immediately executes it once if therunfunction was called during the pause.