perf: use setActiveSub instead of pauseTracking to avoid array usage

Author: johnsoncodehk

packages/reactivity/src/arrayInstrumentations.ts

@@ -1,9 +1,8 @@
 import { isArray } from '@vue/shared'
 import { TrackOpTypes } from './constants'
 import { ARRAY_ITERATE_KEY, track } from './dep'
-import { pauseTracking, resetTracking } from './effect'
 import { isProxy, isShallow, toRaw, toReactive } from './reactive'
-import { endBatch, startBatch } from './system'
+import { endBatch, setActiveSub, startBatch } from './system'
 
 /**
  * Track array iteration and return:
@@ -320,10 +319,10 @@ function noTracking(
   method: keyof Array<any>,
   args: unknown[] = [],
 ) {
-  pauseTracking()
   startBatch()
+  const prevSub = setActiveSub()
   const res = (toRaw(self) as any)[method].apply(self, args)
+  setActiveSub(prevSub)
   endBatch()
-  resetTracking()
   return res
 }

packages/reactivity/src/effect.ts

@@ -226,7 +226,7 @@ const resetTrackingStack: (ReactiveNode | undefined)[] = []
  */
 export function pauseTracking(): void {
   resetTrackingStack.push(activeSub)
-  setActiveSub(undefined)
+  setActiveSub()
 }
 
 /**
@@ -264,7 +264,7 @@ export function resetTracking(): void {
   if (resetTrackingStack.length) {
     setActiveSub(resetTrackingStack.pop()!)
   } else {
-    setActiveSub(undefined)
+    setActiveSub()
   }
 }
 
@@ -305,7 +305,7 @@ export function onEffectCleanup(fn: () => void, failSilently = false): void {
 
 function cleanupEffect(fn: () => void) {
   // run cleanup without active effect
-  const prevSub = setActiveSub(undefined)
+  const prevSub = setActiveSub()
   try {
     fn()
   } finally {

packages/reactivity/src/effectScope.ts

@@ -118,9 +118,7 @@ export function getCurrentScope(): EffectScope | undefined {
   return activeEffectScope
 }
 
-export function setCurrentScope(
-  scope: EffectScope | undefined,
-): EffectScope | undefined {
+export function setCurrentScope(scope?: EffectScope): EffectScope | undefined {
   try {
     return activeEffectScope
   } finally {

packages/reactivity/src/index.ts

@@ -102,3 +102,7 @@ export {
   type WatchCallback,
   type OnCleanup,
 } from './watch'
+/**
+ * @internal
+ */
+export { setActiveSub } from './system'

packages/reactivity/src/system.ts

@@ -45,9 +45,7 @@ export let activeSub: ReactiveNode | undefined = undefined
 let notifyIndex = 0
 let notifyBufferLength = 0
 
-export function setActiveSub(
-  sub: ReactiveNode | undefined,
-): ReactiveNode | undefined {
+export function setActiveSub(sub?: ReactiveNode): ReactiveNode | undefined {
   try {
     return activeSub
   } finally {

packages/reactivity/src/watch.ts

@@ -11,15 +11,10 @@ import {
 } from '@vue/shared'
 import type { ComputedRef } from './computed'
 import { ReactiveFlags } from './constants'
-import {
-  type DebuggerOptions,
-  ReactiveEffect,
-  cleanup,
-  pauseTracking,
-  resetTracking,
-} from './effect'
+import { type DebuggerOptions, ReactiveEffect, cleanup } from './effect'
 import { isReactive, isShallow } from './reactive'
 import { type Ref, isRef } from './ref'
+import { setActiveSub } from './system'
 import { warn } from './warning'
 
 // These errors were transferred from `packages/runtime-core/src/errorHandling.ts`
@@ -159,11 +154,11 @@ export class WatcherEffect extends ReactiveEffect {
         // no cb -> simple effect
         getter = () => {
           if (this.cleanupsLength) {
-            pauseTracking()
+            const prevSub = setActiveSub()
             try {
               cleanup(this)
             } finally {
-              resetTracking()
+              setActiveSub(prevSub)
             }
           }
           const currentEffect = activeWatcher

packages/runtime-core/src/apiLifecycle.ts

@@ -8,11 +8,7 @@ import type { ComponentPublicInstance } from './componentPublicInstance'
 import { ErrorTypeStrings, callWithAsyncErrorHandling } from './errorHandling'
 import { warn } from './warning'
 import { toHandlerKey } from '@vue/shared'
-import {
-  type DebuggerEvent,
-  pauseTracking,
-  resetTracking,
-} from '@vue/reactivity'
+import { type DebuggerEvent, setActiveSub } from '@vue/reactivity'
 import { LifecycleHooks } from './enums'
 
 export { onActivated, onDeactivated } from './components/KeepAlive'
@@ -33,7 +29,7 @@ export function injectHook(
       (hook.__weh = (...args: unknown[]) => {
         // disable tracking inside all lifecycle hooks
         // since they can potentially be called inside effects.
-        pauseTracking()
+        const prevSub = setActiveSub()
         // Set currentInstance during hook invocation.
         // This assumes the hook does not synchronously trigger other hooks, which
         // can only be false when the user does something really funky.
@@ -42,7 +38,7 @@ export function injectHook(
           return callWithAsyncErrorHandling(hook, target, type, args)
         } finally {
           setCurrentInstance(...prev)
-          resetTracking()
+          setActiveSub(prevSub)
         }
       })
     if (prepend) {

packages/runtime-core/src/component.ts

@@ -5,9 +5,8 @@ import {
   TrackOpTypes,
   isRef,
   markRaw,
-  pauseTracking,
   proxyRefs,
-  resetTracking,
+  setActiveSub,
   shallowReadonly,
   track,
 } from '@vue/reactivity'
@@ -887,7 +886,7 @@ function setupStatefulComponent(
   // 2. call setup()
   const { setup } = Component
   if (setup) {
-    pauseTracking()
+    const prevSub = setActiveSub()
     const setupContext = (instance.setupContext =
       setup.length > 1 ? createSetupContext(instance) : null)
     const prev = setCurrentInstance(instance)
@@ -901,7 +900,7 @@ function setupStatefulComponent(
       ],
     )
     const isAsyncSetup = isPromise(setupResult)
-    resetTracking()
+    setActiveSub(prevSub)
     setCurrentInstance(...prev)
 
     if ((isAsyncSetup || instance.sp) && !isAsyncWrapper(instance)) {
@@ -1085,13 +1084,13 @@ export function finishComponentSetup(
 
   // support for 2.x options
   if (__FEATURE_OPTIONS_API__ && !(__COMPAT__ && skipOptions)) {
-    const prev = setCurrentInstance(instance)
-    pauseTracking()
+    const prevInstance = setCurrentInstance(instance)
+    const prevSub = setActiveSub()
     try {
       applyOptions(instance)
     } finally {
-      resetTracking()
-      setCurrentInstance(...prev)
+      setActiveSub(prevSub)
+      setCurrentInstance(...prevInstance)
     }
   }
 

packages/runtime-core/src/customFormatter.ts

@@ -4,8 +4,7 @@ import {
   isReadonly,
   isRef,
   isShallow,
-  pauseTracking,
-  resetTracking,
+  setActiveSub,
   toRaw,
 } from '@vue/reactivity'
 import { EMPTY_OBJ, extend, isArray, isFunction, isObject } from '@vue/shared'
@@ -37,9 +36,9 @@ export function initCustomFormatter(): void {
         return ['div', vueStyle, `VueInstance`]
       } else if (isRef(obj)) {
         // avoid tracking during debugger accessing
-        pauseTracking()
+        const prevSub = setActiveSub()
         const value = obj.value
-        resetTracking()
+        setActiveSub(prevSub)
         return [
           'div',
           {},

packages/runtime-core/src/directives.ts

@@ -23,7 +23,7 @@ import { currentRenderingInstance } from './componentRenderContext'
 import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 import type { ComponentPublicInstance } from './componentPublicInstance'
 import { mapCompatDirectiveHook } from './compat/customDirective'
-import { pauseTracking, resetTracking, traverse } from '@vue/reactivity'
+import { setActiveSub, traverse } from '@vue/reactivity'
 
 export interface DirectiveBinding<
   Value = any,
@@ -187,14 +187,14 @@ export function invokeDirectiveHook(
     if (hook) {
       // disable tracking inside all lifecycle hooks
       // since they can potentially be called inside effects.
-      pauseTracking()
+      const prevSub = setActiveSub()
       callWithAsyncErrorHandling(hook, instance, ErrorCodes.DIRECTIVE_HOOK, [
         vnode.el,
         binding,
         vnode,
         prevVNode,
       ])
-      resetTracking()
+      setActiveSub(prevSub)
     }
   }
 }