feat(reactivity): add pause/resume methods to ReactiveEffect

packages/reactivity/src/effect.ts

@@ -69,6 +69,10 @@ export class ReactiveEffect<T = any> {
  */
  private deferStop?: boolean
 
+ private _isPaused = false
+
+ private _isCalled = false
+
  onStop?: () => void
  // dev only
  onTrack?: (event: DebuggerEvent) => void
@@ -83,7 +87,24 @@ export class ReactiveEffect<T = any> {
  recordEffectScope(this, scope)
  }
 
+ pause() {
+ this._isPaused = true
+ }
+
+ resume(runOnce = false) {
+ if (this._isPaused) {
+ this._isPaused = false
+ if (this._isCalled && runOnce) {
+ this.run()
+ }
+ this._isCalled = false
+ }
+ }
  run() {
+ if (this._isPaused) {
+ this._isCalled = true
+ return
+ }
  if (!this.active) {
  return this.fn()
  }

packages/reactivity/src/effectScope.ts

@@ -17,6 +17,8 @@ export class EffectScope {
  */
  cleanups: (() => void)[] = []
 
+ private _isPaused = false
+
  /**
  * only assigned by undetached scope
  * @internal
@@ -34,20 +36,52 @@ export class EffectScope {
  */
  private index: number | undefined
 
- constructor(public detached = false) {
- this.parent = activeEffectScope
- if (!detached && activeEffectScope) {
- this.index =
- (activeEffectScope.scopes || (activeEffectScope.scopes = [])).push(
- this
- ) - 1
+ constructor(detached: false, parent?: EffectScope | undefined)
+ constructor(detached?: boolean)
+ constructor(
+ public detached = false,
+ parent = activeEffectScope
+ ) {
+ this.parent = parent
+ if (!detached && parent) {
+ this.index = (parent.scopes || (parent.scopes = [])).push(this) - 1
  }
  }
 
  get active() {
  return this._active
  }
 
+ pause() {
+ if (this._active) {
+ this._isPaused = true
+ if (this.scopes) {
+ for (let i = 0, l = this.scopes.length; i < l; i++) {
+ this.scopes[i].pause()
+ }
+ }
+ for (let i = 0, l = this.effects.length; i < l; i++) {
+ this.effects[i].pause()
+ }
+ }
+ }
+
+ resume(runOnce = false) {
+ if (this._active) {
+ if (this._isPaused) {
+ this._isPaused = false
+ if (this.scopes) {
+ for (let i = 0, l = this.scopes.length; i < l; i++) {
+ this.scopes[i].resume(runOnce)
+ }
+ }
+ for (let i = 0, l = this.effects.length; i < l; i++) {
+ this.effects[i].resume(runOnce)
+ }
+ }
+ }
+ }
+
  run<T>(fn: () => T): T | undefined {
  if (this._active) {
  const currentEffectScope = activeEffectScope
@@ -114,10 +148,13 @@ export class EffectScope {
  * corresponding {@link https://github.com/vuejs/rfcs/blob/master/active-rfcs/0041-reactivity-effect-scope.md | RFC}.
  *
  * @param detached - Can be used to create a "detached" effect scope.
+ * @param parent - Can be passed to explicitly set the parent scope.
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#effectscope}
  */
-export function effectScope(detached?: boolean) {
- return new EffectScope(detached)
+export function effectScope(detached: false, parent?: EffectScope): EffectScope
+export function effectScope(detached?: boolean): EffectScope
+export function effectScope(detached?: boolean, parent?: EffectScope) {
+ return new EffectScope(detached as any, parent)
 }
 
 export function recordEffectScope(

packages/runtime-core/__tests__/components/KeepAlive.spec.ts

@@ -977,4 +977,49 @@ describe('KeepAlive', () => {
  expect(mountedB).toHaveBeenCalledTimes(1)
  expect(unmountedB).toHaveBeenCalledTimes(0)
  })
+
+ test('should resume/pause update in activated/deactivated', async () => {
+ const renderA = vi.fn(() => 'A')
+ const msg = ref('hello')
+ const A = {
+ render: () => h('div', [renderA(), msg.value])
+ }
+ const B = {
+ render: () => 'B'
+ }
+
+ const current = shallowRef(A)
+ const app = createApp({
+ setup() {
+ return () => {
+ return [h(KeepAlive, { lazy: true }, h(current.value))]
+ }
+ }
+ })
+
+ app.mount(root)
+
+ expect(serializeInner(root)).toBe(`<div>Ahello</div>`)
+ expect(renderA).toHaveBeenCalledTimes(1)
+ msg.value = 'world'
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>Aworld</div>`)
+ expect(renderA).toHaveBeenCalledTimes(2)
+
+ // @ts-expect-error
+ current.value = B
+ await nextTick()
+ expect(serializeInner(root)).toBe(`B`)
+ expect(renderA).toHaveBeenCalledTimes(2)
+
+ msg.value = 'hello world'
+ await nextTick()
+ expect(serializeInner(root)).toBe(`B`)
+ expect(renderA).toHaveBeenCalledTimes(2)
+
+ current.value = A
+ await nextTick()
+ expect(serializeInner(root)).toBe(`<div>Ahello world</div>`)
+ expect(renderA).toHaveBeenCalledTimes(3)
+ })
 })

packages/runtime-core/src/component.ts

@@ -502,7 +502,7 @@ export function createComponentInstance(
  subTree: null!, // will be set synchronously right after creation
  effect: null!,
  update: null!, // will be set synchronously right after creation
- scope: new EffectScope(true /* detached */),
+ scope: new EffectScope(false, parent?.scope),
  render: null,
  proxy: null,
  exposed: null,

packages/runtime-core/src/components/KeepAlive.ts

@@ -52,6 +52,7 @@ export interface KeepAliveProps {
  include?: MatchPattern
  exclude?: MatchPattern
  max?: number | string
+ lazy?: boolean
 }
 
 type CacheKey = string | number | symbol | ConcreteComponent
@@ -84,7 +85,8 @@ const KeepAliveImpl: ComponentOptions = {
  props: {
  include: [String, RegExp, Array],
  exclude: [String, RegExp, Array],
- max: [String, Number]
+ max: [String, Number],
+ lazy: Boolean
  },
 
  setup(props: KeepAliveProps, { slots }: SetupContext) {
@@ -127,6 +129,12 @@ const KeepAliveImpl: ComponentOptions = {
 
  sharedContext.activate = (vnode, container, anchor, isSVG, optimized) => {
  const instance = vnode.component!
+
+ if (props.lazy) {
+ // on activation, resume the effect of the component instance and immediately execute the call during the pause process
+ instance.scope.resume(true)
+ }
+
  move(vnode, container, anchor, MoveType.ENTER, parentSuspense)
  // in case props have changed
  patch(
@@ -159,6 +167,12 @@ const KeepAliveImpl: ComponentOptions = {
 
  sharedContext.deactivate = (vnode: VNode) => {
  const instance = vnode.component!
+
+ if (props.lazy) {
+ // on deactivation, pause the effect of the component instance
+ instance.scope.pause()
+ }
+
  move(vnode, storageContainer, null, MoveType.LEAVE, parentSuspense)
  queuePostRenderEffect(() => {
  if (instance.da) {

packages/runtime-core/src/renderer.ts

@@ -45,7 +45,7 @@ import {
  flushPreFlushCbs,
  SchedulerJob
 } from './scheduler'
-import { pauseTracking, resetTracking, ReactiveEffect } from '@vue/reactivity'
+import { pauseTracking, ReactiveEffect, resetTracking } from '@vue/reactivity'
 import { updateProps } from './componentProps'
 import { updateSlots } from './componentSlots'
 import { pushWarningContext, popWarningContext, warn } from './warning'
@@ -1541,7 +1541,7 @@ function baseCreateRenderer(
  }
  }
 
- // create reactive effect for rendering
+ // create render effect for rendering
  const effect = (instance.effect = new ReactiveEffect(
  componentUpdateFn,
  () => queueJob(update),