Try fix vuejs#10236

Author: johnsoncodehk

packages/reactivity/__tests__/computed.spec.ts

@@ -122,21 +122,6 @@ describe('reactivity/computed', () => {
     expect(getter2).toHaveBeenCalledTimes(2)
   })
 
-  it('should no longer update when stopped', () => {
-    const value = reactive<{ foo?: number }>({})
-    const cValue = computed(() => value.foo)
-    let dummy
-    effect(() => {
-      dummy = cValue.value
-    })
-    expect(dummy).toBe(undefined)
-    value.foo = 1
-    expect(dummy).toBe(1)
-    cValue.effect.stop()
-    value.foo = 2
-    expect(dummy).toBe(1)
-  })
-
   it('should support setter', () => {
     const n = ref(1)
     const plusOne = computed({
@@ -218,12 +203,6 @@ describe('reactivity/computed', () => {
     expect(isReadonly(z.value.a)).toBe(false)
   })
 
-  it('should expose value when stopped', () => {
-    const x = computed(() => 1)
-    x.effect.stop()
-    expect(x.value).toBe(1)
-  })
-
   it('debug: onTrack', () => {
     let events: DebuggerEvent[] = []
     const onTrack = vi.fn((e: DebuggerEvent) => {

packages/reactivity/__tests__/deferredComputed.spec.ts

@@ -136,20 +136,4 @@ describe('deferred computed', () => {
     c2.value
     expect(effectSpy).toHaveBeenCalledTimes(2)
   })
-
-  test('should not compute if deactivated before scheduler is called', () => {
-    const c1Spy = vi.fn()
-    const src = ref(0)
-    const c1 = computed(() => {
-      c1Spy()
-      return src.value % 2
-    })
-    effect(() => c1.value)
-    expect(c1Spy).toHaveBeenCalledTimes(1)
-
-    c1.effect.stop()
-    // trigger
-    src.value++
-    expect(c1Spy).toHaveBeenCalledTimes(1)
-  })
 })

packages/reactivity/__tests__/effectScope.spec.ts

@@ -267,8 +267,8 @@ describe('reactivity/effect/scope', () => {
     r.value++
     c!.value
     await nextTick()
+    expect(computedSpy).toHaveBeenCalledTimes(3)
     // should not trigger anymore
-    expect(computedSpy).toHaveBeenCalledTimes(2)
     expect(watchSpy).toHaveBeenCalledTimes(1)
     expect(watchEffectSpy).toHaveBeenCalledTimes(2)
   })

packages/reactivity/src/computed.ts

@@ -52,7 +52,9 @@ export class ComputedRefImpl<T> {
         ),
     )
     this.effect.computed = this
-    this.effect.active = this._cacheable = !isSSR
+    // TODO: How SSR affect computed?
+    // this.effect.active = this._cacheable = !isSSR
+    this._cacheable = !isSSR
     this[ReactiveFlags.IS_READONLY] = isReadonly
   }
 

packages/reactivity/src/effect.ts

@@ -26,7 +26,6 @@ export type DebuggerEventExtraInfo = {
 export let activeEffect: ReactiveEffect | undefined
 
 export class ReactiveEffect<T = any> {
-  active = true
   deps: Dep[] = []
 
   /**
@@ -39,7 +38,6 @@ export class ReactiveEffect<T = any> {
    */
   allowRecurse?: boolean
 
-  onStop?: () => void
   // dev only
   onTrack?: (event: DebuggerEvent) => void
   // dev only
@@ -105,9 +103,6 @@ export class ReactiveEffect<T = any> {
 
   run() {
     this._dirtyLevel = DirtyLevels.NotDirty
-    if (!this.active) {
-      return this.fn()
-    }
     let lastShouldTrack = shouldTrack
     let lastEffect = activeEffect
     try {
@@ -123,6 +118,19 @@ export class ReactiveEffect<T = any> {
       shouldTrack = lastShouldTrack
     }
   }
+}
+
+export class ReactiveSideEffect<T = any> extends ReactiveEffect<T> {
+  active = true
+
+  onStop?: () => void
+
+  run() {
+    if (!this.active) {
+      return this.fn()
+    }
+    return super.run()
+  }
 
   stop() {
     if (this.active) {
@@ -177,7 +185,7 @@ export interface ReactiveEffectOptions extends DebuggerOptions {
 
 export interface ReactiveEffectRunner<T = any> {
   (): T
-  effect: ReactiveEffect
+  effect: ReactiveSideEffect
 }
 
 /**
@@ -198,7 +206,7 @@ export function effect<T = any>(
     fn = (fn as ReactiveEffectRunner).effect.fn
   }
 
-  const _effect = new ReactiveEffect(fn, NOOP, () => {
+  const _effect = new ReactiveSideEffect(fn, NOOP, () => {
     if (_effect.dirty) {
       _effect.run()
     }

packages/reactivity/src/effectScope.ts

@@ -1,4 +1,4 @@
-import type { ReactiveEffect } from './effect'
+import type { ReactiveEffect, ReactiveSideEffect } from './effect'
 import { warn } from './warning'
 
 let activeEffectScope: EffectScope | undefined
@@ -11,7 +11,7 @@ export class EffectScope {
   /**
    * @internal
    */
-  effects: ReactiveEffect[] = []
+  effects: (ReactiveEffect | ReactiveSideEffect)[] = []
   /**
    * @internal
    */
@@ -82,7 +82,10 @@ export class EffectScope {
     if (this._active) {
       let i, l
       for (i = 0, l = this.effects.length; i < l; i++) {
-        this.effects[i].stop()
+        const effect = this.effects[i]
+        if ('stop' in effect) {
+          effect.stop()
+        }
       }
       for (i = 0, l = this.cleanups.length; i < l; i++) {
         this.cleanups[i]()

packages/reactivity/src/index.ts

@@ -54,6 +54,7 @@ export {
   pauseScheduling,
   resetScheduling,
   ReactiveEffect,
+  ReactiveSideEffect,
   type ReactiveEffectRunner,
   type ReactiveEffectOptions,
   type EffectScheduler,

packages/runtime-core/__tests__/apiSetupHelpers.spec.ts

@@ -1,9 +1,7 @@
 import {
   type ComponentInternalInstance,
-  type ComputedRef,
   type SetupContext,
   Suspense,
-  computed,
   createApp,
   defineComponent,
   getCurrentInstance,
@@ -419,38 +417,5 @@ describe('SFC <script setup> helpers', () => {
       expect(uids.one.before).toBe(uids.one.after)
       expect(uids.two.before).toBe(uids.two.after)
     })
-
-    test('should teardown in-scope effects', async () => {
-      let resolve: (val?: any) => void
-      const ready = new Promise(r => {
-        resolve = r
-      })
-
-      let c: ComputedRef
-
-      const Comp = defineComponent({
-        async setup() {
-          let __temp: any, __restore: any
-          ;[__temp, __restore] = withAsyncContext(() => Promise.resolve())
-          __temp = await __temp
-          __restore()
-
-          c = computed(() => {})
-          // register the lifecycle after an await statement
-          onMounted(resolve)
-          return () => ''
-        },
-      })
-
-      const app = createApp(() => h(Suspense, () => h(Comp)))
-      const root = nodeOps.createElement('div')
-      app.mount(root)
-
-      await ready
-      expect(c!.effect.active).toBe(true)
-
-      app.unmount()
-      expect(c!.effect.active).toBe(false)
-    })
   })
 })

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -1185,7 +1185,11 @@ describe('api: watch', () => {
     await nextTick()
     await nextTick()
 
-    expect(instance!.scope.effects[0].active).toBe(false)
+    for (const effect of instance!.scope.effects) {
+      if ('active' in effect) {
+        expect(effect.active).toBe(false)
+      }
+    }
   })
 
   test('this.$watch should pass `this.proxy` to watch source as the first argument ', () => {

packages/runtime-core/src/apiWatch.ts

@@ -2,7 +2,7 @@ import {
   type ComputedRef,
   type DebuggerOptions,
   type EffectScheduler,
-  ReactiveEffect,
+  ReactiveSideEffect,
   ReactiveFlags,
   type Ref,
   getCurrentScope,
@@ -392,7 +392,7 @@ function doWatch(
     scheduler = () => queueJob(job)
   }
 
-  const effect = new ReactiveEffect(getter, NOOP, scheduler)
+  const effect = new ReactiveSideEffect(getter, NOOP, scheduler)
 
   const scope = getCurrentScope()
   const unwatch = () => {