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)
     }
   }
 }

packages/runtime-core/src/errorHandling.ts

@@ -1,4 +1,4 @@
-import { pauseTracking, resetTracking } from '@vue/reactivity'
+import { setActiveSub } from '@vue/reactivity'
 import type { GenericComponentInstance } from './component'
 import { popWarningContext, pushWarningContext, warn } from './warning'
 import { EMPTY_OBJ, isArray, isFunction, isPromise } from '@vue/shared'
@@ -139,13 +139,13 @@ export function handleError(
     }
     // app-level handling
     if (errorHandler) {
-      pauseTracking()
+      const prevSub = setActiveSub()
       callWithErrorHandling(errorHandler, null, ErrorCodes.APP_ERROR_HANDLER, [
         err,
         exposedInstance,
         errorInfo,
       ])
-      resetTracking()
+      setActiveSub(prevSub)
       return
     }
   }

packages/runtime-core/src/renderer.ts

@@ -57,8 +57,7 @@ import {
 import {
   EffectFlags,
   ReactiveEffect,
-  pauseTracking,
-  resetTracking,
+  setActiveSub,
   setCurrentScope,
 } from '@vue/reactivity'
 import { updateProps } from './componentProps'
@@ -1693,11 +1692,11 @@ function baseCreateRenderer(
     updateProps(instance, nextVNode.props, prevProps, optimized)
     updateSlots(instance, nextVNode.children, optimized)
 
-    pauseTracking()
+    const prevSub = setActiveSub()
     // props update may have triggered pre-flush watchers.
     // flush them before the render update.
     flushPreFlushCbs(instance)
-    resetTracking()
+    setActiveSub(prevSub)
   }
 
   const patchChildren: PatchChildrenFn = (

packages/runtime-core/src/warning.ts

@@ -4,7 +4,7 @@ import {
   formatComponentName,
 } from './component'
 import { isFunction, isString } from '@vue/shared'
-import { isRef, pauseTracking, resetTracking, toRaw } from '@vue/reactivity'
+import { isRef, setActiveSub, toRaw } from '@vue/reactivity'
 import { ErrorCodes, callWithErrorHandling } from './errorHandling'
 import { type VNode, isVNode } from './vnode'
 
@@ -41,7 +41,7 @@ export function warn(msg: string, ...args: any[]): void {
 
   // avoid props formatting or warn handler tracking deps that might be mutated
   // during patch, leading to infinite recursion.
-  pauseTracking()
+  const prevSub = setActiveSub()
 
   const entry = stack.length ? stack[stack.length - 1] : null
   const instance = isVNode(entry) ? entry.component : entry
@@ -79,7 +79,7 @@ export function warn(msg: string, ...args: any[]): void {
     console.warn(...warnArgs)
   }
 
-  resetTracking()
+  setActiveSub(prevSub)
   isWarning = false
 }
 

packages/runtime-vapor/src/apiCreateFor.ts

@@ -3,8 +3,7 @@ import {
   type ShallowRef,
   isReactive,
   isShallow,
-  pauseTracking,
-  resetTracking,
+  setActiveSub,
   shallowReadArray,
   shallowRef,
   toReactive,
@@ -95,7 +94,7 @@ export const createFor = (
     const oldLength = oldBlocks.length
     newBlocks = new Array(newLength)
 
-    pauseTracking()
+    const prevSub = setActiveSub()
 
     if (!isMounted) {
       isMounted = true
@@ -284,7 +283,7 @@ export const createFor = (
       frag.nodes.push(parentAnchor)
     }
 
-    resetTracking()
+    setActiveSub(prevSub)
   }
 
   const needKey = renderItem.length > 1

packages/runtime-vapor/src/block.ts

@@ -6,7 +6,7 @@ import {
   unmountComponent,
 } from './component'
 import { createComment, createTextNode } from './dom/node'
-import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
+import { EffectScope, setActiveSub } from '@vue/reactivity'
 import { isHydrating } from './dom/hydration'
 
 export type Block =
@@ -47,7 +47,7 @@ export class DynamicFragment extends VaporFragment {
     }
     this.current = key
 
-    pauseTracking()
+    const prevSub = setActiveSub()
     const parent = this.anchor.parentNode
 
     // teardown previous branch
@@ -73,7 +73,7 @@ export class DynamicFragment extends VaporFragment {
       parent && insert(this.nodes, parent, this.anchor)
     }
 
-    resetTracking()
+    setActiveSub(prevSub)
   }
 }
 

packages/runtime-vapor/src/component.ts

@@ -30,9 +30,8 @@ import {
   type ShallowRef,
   markRaw,
   onScopeDispose,
-  pauseTracking,
   proxyRefs,
-  resetTracking,
+  setActiveSub,
   unref,
 } from '@vue/reactivity'
 import { EMPTY_OBJ, invokeArrayFns, isFunction, isString } from '@vue/shared'
@@ -191,8 +190,8 @@ export function createComponent(
     instance.emitsOptions = normalizeEmitsOptions(component)
   }
 
-  const prev = setCurrentInstance(instance)
-  pauseTracking()
+  const prevInstance = setCurrentInstance(instance)
+  const prevSub = setActiveSub()
 
   if (__DEV__) {
     setupPropsValidation(instance)
@@ -258,8 +257,8 @@ export function createComponent(
     })
   }
 
-  resetTracking()
-  setCurrentInstance(...prev)
+  setActiveSub(prevSub)
+  setCurrentInstance(...prevInstance)
 
   if (__DEV__) {
     popWarningContext()