perf(reactivity): avoid unnecessary recursion in removeSub (#12135)

packages/reactivity/__tests__/computed.spec.ts

@@ -1107,4 +1107,36 @@ describe('reactivity/computed', () => {
       end.prop4.value,
     ]).toMatchObject([-2, -4, 2, 3])
   })
+
+  test('performance when removing dependencies from deeply nested computeds', () => {
+    const base = ref(1)
+    const trigger = ref(true)
+    const computeds: ComputedRef<number>[] = []
+
+    const LAYERS = 30
+
+    for (let i = 0; i < LAYERS; i++) {
+      const earlier = [...computeds]
+
+      computeds.push(
+        computed(() => {
+          return base.value + earlier.reduce((sum, c) => sum + c.value, 0)
+        }),
+      )
+    }
+
+    const tail = computed(() =>
+      trigger.value ? computeds[computeds.length - 1].value : 0,
+    )
+
+    const t0 = performance.now()
+    expect(tail.value).toBe(2 ** (LAYERS - 1))
+    const t1 = performance.now()
+    expect(t1 - t0).toBeLessThan(process.env.CI ? 100 : 30)
+
+    trigger.value = false
+    expect(tail.value).toBe(0)
+    const t2 = performance.now()
+    expect(t2 - t1).toBeLessThan(process.env.CI ? 100 : 30)
+  })
 })

packages/reactivity/src/effect.ts

@@ -426,16 +426,16 @@ function removeSub(link: Link, soft = false) {
     nextSub.prevSub = prevSub
     link.nextSub = undefined
   }
-  if (dep.subs === link) {
-    // was previous tail, point new tail to prev
-    dep.subs = prevSub
-  }
   if (__DEV__ && dep.subsHead === link) {
     // was previous head, point new head to next
     dep.subsHead = nextSub
   }
 
-  if (!dep.subs && dep.computed) {
+  if (dep.subs === link) {
+    // was previous tail, point new tail to prev
+    dep.subs = prevSub
+
+    if (!prevSub && dep.computed) {
       // if computed, unsubscribe it from all its deps so this computed and its
       // value can be GCed
       dep.computed.flags &= ~EffectFlags.TRACKING
@@ -445,6 +445,7 @@ function removeSub(link: Link, soft = false) {
         removeSub(l, true)
       }
     }
+  }
 
   if (!soft && !--dep.sc && dep.map) {
     // #11979