Fix #10185, Re-evaluate effect immediately until it doesn't re-trigger itself

packages/reactivity/__tests__/computed.spec.ts

@@ -1,4 +1,11 @@
-import { h, nextTick, nodeOps, render, serializeInner } from '@vue/runtime-test'
+import {
+  h,
+  nextTick,
+  nodeOps,
+  render,
+  serializeInner,
+  shallowRef,
+} from '@vue/runtime-test'
 import {
   type DebuggerEvent,
   ITERATE_KEY,
@@ -480,9 +487,9 @@ describe('reactivity/computed', () => {
 
     c3.value
 
-    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
-    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
-    expect(c3.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
+    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
+    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
+    expect(c3.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
   })
 
   it('should work when chained(ref+computed)', () => {
@@ -494,9 +501,8 @@ describe('reactivity/computed', () => {
       return 'foo'
     })
     const c2 = computed(() => v.value + c1.value)
-    expect(c2.value).toBe('0foo')
-    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
     expect(c2.value).toBe('1foo')
+    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
   })
 
   it('should trigger effect even computed already dirty', () => {
@@ -515,12 +521,41 @@ describe('reactivity/computed', () => {
       c2.value
     })
     expect(fnSpy).toBeCalledTimes(1)
-    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
-    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.Dirty)
+    expect(c1.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
+    expect(c2.effect._dirtyLevel).toBe(DirtyLevels.NotDirty)
     v.value = 2
     expect(fnSpy).toBeCalledTimes(2)
   })
 
+  it('should not override queried MaybeDirty result', () => {
+    class Item {
+      v = ref(0)
+    }
+    const v1 = shallowRef()
+    const v2 = ref(false)
+    const c1 = computed(() => {
+      let c = v1.value
+      if (!v1.value) {
+        c = new Item()
+        v1.value = c
+      }
+      return c.v.value
+    })
+    const c2 = computed(() => {
+      if (!v2.value) return 'no'
+      return c1.value ? 'yes' : 'no'
+    })
+    const c3 = computed(() => c2.value)
+
+    c3.value
+    v2.value = true
+    c3.value
+    v1.value.v.value = 999
+
+    expect(c3.effect._dirtyLevel).toBe(DirtyLevels.MaybeDirty)
+    expect(c3.value).toBe('yes')
+  })
+
   it('should be not dirty after deps mutate (mutate deps in computed)', async () => {
     const state = reactive<any>({})
     const consumer = computed(() => {

packages/reactivity/__tests__/effect.spec.ts

@@ -376,11 +376,13 @@ describe('reactivity/effect', () => {
 
     const counterSpy = vi.fn(() => counter.num++)
     effect(counterSpy)
-    expect(counter.num).toBe(1)
-    expect(counterSpy).toHaveBeenCalledTimes(1)
+    expect(`Effect is recursively triggering itself`).toHaveBeenWarned()
+    expect(counter.num).toBe(100)
+    expect(counterSpy).toHaveBeenCalledTimes(100)
     counter.num = 4
-    expect(counter.num).toBe(5)
-    expect(counterSpy).toHaveBeenCalledTimes(2)
+    expect(`Effect is recursively triggering itself`).toHaveBeenWarned()
+    expect(counter.num).toBe(104)
+    expect(counterSpy).toHaveBeenCalledTimes(200)
   })
 
   it('should avoid infinite recursive loops when use Array.prototype.push/unshift/pop/shift', () => {
@@ -415,8 +417,9 @@ describe('reactivity/effect', () => {
       }
     })
     effect(numSpy)
-    expect(counter.num).toEqual(10)
-    expect(numSpy).toHaveBeenCalledTimes(10)
+    expect(counter.num).toEqual(109)
+    expect(numSpy).toHaveBeenCalledTimes(109)
+    expect(`Effect is recursively triggering itself`).toHaveBeenWarned()
   })
 
   it('should avoid infinite loops with other effects', () => {

packages/reactivity/src/computed.ts

@@ -1,4 +1,4 @@
-import { type DebuggerOptions, ReactiveEffect, scheduleEffects } from './effect'
+import { type DebuggerOptions, ReactiveEffect } from './effect'
 import { type Ref, trackRefValue, triggerRefValue } from './ref'
 import { NOOP, hasChanged, isFunction } from '@vue/shared'
 import { toRaw } from './reactive'
@@ -44,7 +44,6 @@ export class ComputedRefImpl<T> {
     this.effect = new ReactiveEffect(
       () => getter(this._value),
       () => triggerRefValue(this, DirtyLevels.MaybeDirty),
-      () => this.dep && scheduleEffects(this.dep),
     )
     this.effect.computed = this
     this.effect.active = this._cacheable = !isSSR
@@ -60,9 +59,6 @@ export class ComputedRefImpl<T> {
       }
     }
     trackRefValue(self)
-    if (self.effect._dirtyLevel >= DirtyLevels.MaybeDirty) {
-      triggerRefValue(self, DirtyLevels.MaybeDirty)
-    }
     return self._value
   }
 

packages/reactivity/src/effect.ts

@@ -100,24 +100,38 @@ export class ReactiveEffect<T = any> {
   }
 
   run() {
-    this._dirtyLevel = DirtyLevels.NotDirty
-    if (!this.active) {
-      return this.fn()
-    }
-    let lastShouldTrack = shouldTrack
-    let lastEffect = activeEffect
-    try {
-      shouldTrack = true
-      activeEffect = this
-      this._runnings++
-      preCleanupEffect(this)
-      return this.fn()
-    } finally {
-      postCleanupEffect(this)
-      this._runnings--
-      activeEffect = lastEffect
-      shouldTrack = lastShouldTrack
-    }
+    let result
+
+    let maxRecursion = 100
+    do {
+      this._dirtyLevel = DirtyLevels.NotDirty
+      if (!this.active) {
+        return this.fn()
+      }
+      let lastShouldTrack = shouldTrack
+      let lastEffect = activeEffect
+      try {
+        shouldTrack = true
+        activeEffect = this
+        this._runnings++
+        preCleanupEffect(this)
+        result = this.fn()
+      } finally {
+        postCleanupEffect(this)
+        this._runnings--
+        activeEffect = lastEffect
+        shouldTrack = lastShouldTrack
+      }
+      if (--maxRecursion == 0) {
+        if (__DEV__) {
+          console.warn('Effect is recursively triggering itself')
+          // We regard the computed as being done to avoid reactivity issues as in #10185.
+          this._dirtyLevel = DirtyLevels.NotDirty
+        }
+        return result
+      }
+    } while (this._dirtyLevel >= DirtyLevels.MaybeDirty)
+    return result
   }
 
   stop() {

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

@@ -135,8 +135,6 @@ describe('renderer: component', () => {
 
     const root = nodeOps.createElement('div')
     render(h(App), root)
-    expect(serializeInner(root)).toBe(`<div>0</div><div>1</div>`)
-    await nextTick()
     expect(serializeInner(root)).toBe(`<div>1</div><div>1</div>`)
   })