diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts index 0043af73..4ebdb0a3 100644 --- a/packages/reactivity/src/baseHandlers.ts +++ b/packages/reactivity/src/baseHandlers.ts @@ -12,8 +12,9 @@ const builtInSymbols = new Set( ) function createGetter(isReadonly: boolean) { - return function get(target: any, key: string | symbol, receiver: any) { - const res = Reflect.get(target, key, receiver) + return function get(target: any, key: string | symbol) { + // not using Reflect.get here for perf reasons + const res = target[key] if (isSymbol(key) && builtInSymbols.has(key)) { return res } diff --git a/packages/reactivity/src/computed.ts b/packages/reactivity/src/computed.ts index ec26028b..c0af4a64 100644 --- a/packages/reactivity/src/computed.ts +++ b/packages/reactivity/src/computed.ts @@ -1,4 +1,4 @@ -import { effect, ReactiveEffect, activeReactiveEffectStack } from './effect' +import { effect, ReactiveEffect, effectStack } from './effect' import { Ref, UnwrapRef } from './ref' import { isFunction, NOOP } from '@vue/shared' @@ -67,15 +67,15 @@ export function computed( } function trackChildRun(childRunner: ReactiveEffect) { - const parentRunner = - activeReactiveEffectStack[activeReactiveEffectStack.length - 1] - if (parentRunner) { - for (let i = 0; i < childRunner.deps.length; i++) { - const dep = childRunner.deps[i] - if (!dep.has(parentRunner)) { - dep.add(parentRunner) - parentRunner.deps.push(dep) - } + if (effectStack.length === 0) { + return + } + const parentRunner = effectStack[effectStack.length - 1] + for (let i = 0; i < childRunner.deps.length; i++) { + const dep = childRunner.deps[i] + if (!dep.has(parentRunner)) { + dep.add(parentRunner) + parentRunner.deps.push(dep) } } } diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts index fac7180d..422d08e0 100644 --- a/packages/reactivity/src/effect.ts +++ b/packages/reactivity/src/effect.ts @@ -33,7 +33,7 @@ export interface DebuggerEvent { key: string | symbol | undefined } -export const activeReactiveEffectStack: ReactiveEffect[] = [] +export const effectStack: ReactiveEffect[] = [] export const ITERATE_KEY = Symbol('iterate') @@ -88,13 +88,13 @@ function run(effect: ReactiveEffect, fn: Function, args: any[]): any { if (!effect.active) { return fn(...args) } - if (!activeReactiveEffectStack.includes(effect)) { + if (!effectStack.includes(effect)) { cleanup(effect) try { - activeReactiveEffectStack.push(effect) + effectStack.push(effect) return fn(...args) } finally { - activeReactiveEffectStack.pop() + effectStack.pop() } } } @@ -124,13 +124,10 @@ export function track( type: OperationTypes, key?: string | symbol ) { - if (!shouldTrack) { - return - } - const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1] - if (!effect) { + if (!shouldTrack || effectStack.length === 0) { return } + const effect = effectStack[effectStack.length - 1] if (type === OperationTypes.ITERATE) { key = ITERATE_KEY }