refactor(reactivity): streamline activeSub management in tracking functions

Author: johnsoncodehk

packages/reactivity/src/computed.ts

@@ -1,18 +1,14 @@
 import { hasChanged, isFunction } from '@vue/shared'
 import { ReactiveFlags, TrackOpTypes } from './constants'
 import { onTrack, setupOnTrigger } from './debug'
-import {
-  type DebuggerEvent,
-  type DebuggerOptions,
-  activeSub,
-  setActiveSub,
-} from './effect'
+import { type DebuggerEvent, type DebuggerOptions } from './effect'
 import { activeEffectScope } from './effectScope'
 import type { Ref } from './ref'
 import {
   type Link,
   type ReactiveNode,
   ReactiveFlags as _ReactiveFlags,
+  activeSub,
   checkDirty,
   endTracking,
   link,
@@ -171,9 +167,7 @@ export class ComputedRefImpl<T = any> implements ReactiveNode {
   }
 
   update(): boolean {
-    const prevSub = activeSub
-    setActiveSub(this)
-    startTracking(this)
+    const prevSub = startTracking(this)
     try {
       const oldValue = this._value
       const newValue = this.fn(oldValue)
@@ -183,8 +177,7 @@ export class ComputedRefImpl<T = any> implements ReactiveNode {
       }
       return false
     } finally {
-      setActiveSub(prevSub)
-      endTracking(this)
+      endTracking(this, prevSub)
     }
   }
 }

packages/reactivity/src/dep.ts

@@ -1,11 +1,11 @@
 import { isArray, isIntegerKey, isMap, isSymbol } from '@vue/shared'
 import { type TrackOpTypes, TriggerOpTypes } from './constants'
 import { onTrack, triggerEventInfos } from './debug'
-import { activeSub } from './effect'
 import {
   type Link,
   ReactiveFlags,
   type ReactiveNode,
+  activeSub,
   endBatch,
   link,
   propagate,

packages/reactivity/src/effect.ts

@@ -6,9 +6,11 @@ import {
   type Link,
   ReactiveFlags,
   type ReactiveNode,
+  activeSub,
   checkDirty,
   endTracking,
   link,
+  setActiveSub,
   startTracking,
   unlink,
 } from './system'
@@ -113,10 +115,7 @@ export class ReactiveEffect<T = any>
       return this.fn()
     }
     cleanup(this)
-    const prevSub = activeSub
-    setActiveSub(this)
-    startTracking(this)
-
+    const prevSub = startTracking(this)
     try {
       return this.fn()
     } finally {
@@ -126,8 +125,7 @@ export class ReactiveEffect<T = any>
             'this is likely a Vue internal bug.',
         )
       }
-      setActiveSub(prevSub)
-      endTracking(this)
+      endTracking(this, prevSub)
       const flags = this.flags
       if (
         (flags & (ReactiveFlags.Recursed | EffectFlags.ALLOW_RECURSE)) ===
@@ -234,7 +232,7 @@ const resetTrackingStack: (ReactiveNode | undefined)[] = []
  */
 export function pauseTracking(): void {
   resetTrackingStack.push(activeSub)
-  activeSub = undefined
+  setActiveSub(undefined)
 }
 
 /**
@@ -252,7 +250,7 @@ export function enableTracking(): void {
     resetTrackingStack.push(undefined)
     for (let i = resetTrackingStack.length - 1; i >= 0; i--) {
       if (resetTrackingStack[i] !== undefined) {
-        activeSub = resetTrackingStack[i]
+        setActiveSub(resetTrackingStack[i])
         break
       }
     }
@@ -270,9 +268,9 @@ export function resetTracking(): void {
     )
   }
   if (resetTrackingStack.length) {
-    activeSub = resetTrackingStack.pop()!
+    setActiveSub(resetTrackingStack.pop()!)
   } else {
-    activeSub = undefined
+    setActiveSub(undefined)
   }
 }
 
@@ -313,17 +311,10 @@ export function onEffectCleanup(fn: () => void, failSilently = false): void {
 
 function cleanupEffect(fn: () => void) {
   // run cleanup without active effect
-  const prevSub = activeSub
-  activeSub = undefined
+  const prevSub = setActiveSub(undefined)
   try {
     fn()
   } finally {
-    activeSub = prevSub
+    setActiveSub(prevSub)
   }
 }
-
-export let activeSub: ReactiveNode | undefined = undefined
-
-export function setActiveSub(sub: ReactiveNode | undefined): void {
-  activeSub = sub
-}

packages/reactivity/src/effectScope.ts

@@ -113,9 +113,11 @@ export function getCurrentScope(): EffectScope | undefined {
 export function setCurrentScope(
   scope: EffectScope | undefined,
 ): EffectScope | undefined {
-  const prevScope = activeEffectScope
-  activeEffectScope = scope
-  return prevScope
+  try {
+    return activeEffectScope
+  } finally {
+    activeEffectScope = scope
+  }
 }
 
 /**

packages/reactivity/src/ref.ts

@@ -9,7 +9,6 @@ import type { ComputedRef, WritableComputedRef } from './computed'
 import { ReactiveFlags, TrackOpTypes, TriggerOpTypes } from './constants'
 import { onTrack, triggerEventInfos } from './debug'
 import { getDepFromReactive } from './dep'
-import { activeSub } from './effect'
 import {
   type Builtin,
   type ShallowReactiveMarker,
@@ -23,6 +22,7 @@ import {
   type Link,
   type ReactiveNode,
   ReactiveFlags as _ReactiveFlags,
+  activeSub,
   batchDepth,
   link,
   processEffectNotifications,

packages/reactivity/src/system.ts

@@ -39,9 +39,21 @@ export const enum ReactiveFlags {
 const notifyBuffer: (Effect | undefined)[] = []
 
 export let batchDepth = 0
+export let activeSub: ReactiveNode | undefined = undefined
+
 let notifyIndex = 0
 let notifyBufferLength = 0
 
+export function setActiveSub(
+  sub: ReactiveNode | undefined,
+): ReactiveNode | undefined {
+  try {
+    return activeSub
+  } finally {
+    activeSub = sub
+  }
+}
+
 export function startBatch(): void {
   ++batchDepth
 }
@@ -209,21 +221,26 @@ export function propagate(link: Link): void {
   } while (true)
 }
 
-export function startTracking(sub: ReactiveNode): void {
+export function startTracking(sub: ReactiveNode): ReactiveNode | undefined {
   sub.depsTail = undefined
   sub.flags =
     (sub.flags &
       ~(ReactiveFlags.Recursed | ReactiveFlags.Dirty | ReactiveFlags.Pending)) |
     ReactiveFlags.RecursedCheck
+  return setActiveSub(sub)
 }
 
-export function endTracking(sub: ReactiveNode): void {
+export function endTracking(
+  sub: ReactiveNode,
+  prevSub: ReactiveNode | undefined,
+): void {
   const depsTail = sub.depsTail
   let toRemove = depsTail !== undefined ? depsTail.nextDep : sub.deps
   while (toRemove !== undefined) {
     toRemove = unlink(toRemove, sub)
   }
   sub.flags &= ~ReactiveFlags.RecursedCheck
+  activeSub = prevSub
 }
 
 export function processEffectNotifications(): void {

packages/runtime-core/src/componentCurrentInstance.ts

@@ -84,8 +84,9 @@ export const setCurrentInstance = (
     ? instance.scope
     : undefined,
 ): [GenericComponentInstance | null, EffectScope | undefined] => {
-  const prev = currentInstance
-  simpleSetCurrentInstance(instance)
-  const prevScope = setCurrentScope(scope)
-  return [prev, prevScope]
+  try {
+    return [currentInstance, setCurrentScope(scope)]
+  } finally {
+    simpleSetCurrentInstance(instance)
+  }
 }