fix(reactivity): no longer allows stop computed effect

packages/reactivity/__tests__/computed.spec.ts

@@ -123,21 +123,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({
@@ -219,12 +204,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

@@ -59,7 +59,7 @@ export class ComputedRefImpl<T> {
         ),
     )
     this.effect.computed = this
-    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,6 +1,7 @@
 import {
   type ComponentInternalInstance,
   type ComputedRef,
+  type ReactiveSideEffect,
   type SetupContext,
   Suspense,
   computed,
@@ -13,6 +14,7 @@ import {
   render,
   serializeInner,
   shallowReactive,
+  watchEffect,
 } from '@vue/runtime-test'
 import {
   createPropsRestProxy,
@@ -427,6 +429,7 @@ describe('SFC <script setup> helpers', () => {
       })
 
       let c: ComputedRef
+      let effect: ReactiveSideEffect
 
       const Comp = defineComponent({
         async setup() {
@@ -436,6 +439,8 @@ describe('SFC <script setup> helpers', () => {
           __restore()
 
           c = computed(() => {})
+          watchEffect(() => c.value)
+          effect = [...(c! as any).dep!.keys()][0]
           // register the lifecycle after an await statement
           onMounted(resolve)
           return () => ''
@@ -447,10 +452,10 @@ describe('SFC <script setup> helpers', () => {
       app.mount(root)
 
       await ready
-      expect(c!.effect.active).toBe(true)
+      expect(effect!.active).toBe(true)
 
       app.unmount()
-      expect(c!.effect.active).toBe(false)
+      expect(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,8 +2,8 @@ import {
   type ComputedRef,
   type DebuggerOptions,
   type EffectScheduler,
-  ReactiveEffect,
   ReactiveFlags,
+  ReactiveSideEffect,
   type Ref,
   getCurrentScope,
   isReactive,
@@ -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 = () => {

packages/runtime-core/src/index.ts

@@ -29,6 +29,7 @@ export {
   effect,
   stop,
   ReactiveEffect,
+  ReactiveSideEffect,
   // effect scope
   effectScope,
   EffectScope,