perf: calculate embedded computed() on-demand

Author: johnsoncodehk

packages/reactivity/__tests__/computed.spec.ts

@@ -289,4 +289,55 @@ describe('reactivity/computed', () => {
       oldValue: 2
     })
   })
+
+  it('chained computed value on-demand trigger', () => {
+    const c1Spy = jest.fn()
+    const c2Spy = jest.fn()
+
+    const src = ref(0)
+    const c1 = computed(() => {
+      c1Spy()
+      return src.value < 5
+    })
+    const c2 = computed(() => {
+      c2Spy()
+      return c1.value ? '< 5' : '>= 5'
+    })
+
+    expect(c1Spy).toHaveBeenCalledTimes(0)
+    expect(c2Spy).toHaveBeenCalledTimes(0)
+
+    expect(src.value).toBe(0)
+    expect(c2.value).toBe('< 5')
+    expect(c1Spy).toHaveBeenCalledTimes(1)
+    expect(c2Spy).toHaveBeenCalledTimes(1)
+
+    src.value++
+    expect(c2.value).toBe('< 5')
+    expect(c1Spy).toHaveBeenCalledTimes(2)
+    expect(c2Spy).toHaveBeenCalledTimes(1)
+
+    for (let i = 0; i < 10; i++) {
+      src.value++
+    }
+    expect(src.value).toBe(11)
+    expect(c2.value).toBe('>= 5')
+    expect(c1Spy).toHaveBeenCalledTimes(3)
+    expect(c2Spy).toHaveBeenCalledTimes(2)
+
+    src.value++
+    expect(src.value).toBe(12)
+    expect(c2.value).toBe('>= 5')
+    expect(c1Spy).toHaveBeenCalledTimes(4)
+    expect(c2Spy).toHaveBeenCalledTimes(2)
+
+    for (let i = 0; i < 100; i++) {
+      src.value++
+      c2.value
+    }
+    expect(src.value).toBe(112)
+    expect(c2.value).toBe('>= 5')
+    expect(c1Spy).toHaveBeenCalledTimes(104)
+    expect(c2Spy).toHaveBeenCalledTimes(2)
+  })
 })

packages/reactivity/src/baseHandlers.ts

@@ -179,9 +179,9 @@ function createSetter(shallow = false) {
     // don't trigger if target is something up in the prototype chain of original
     if (target === toRaw(receiver)) {
       if (!hadKey) {
-        trigger(target, TriggerOpTypes.ADD, key, value)
+        trigger(target, TriggerOpTypes.ADD, undefined, key, value)
       } else if (hasChanged(value, oldValue)) {
-        trigger(target, TriggerOpTypes.SET, key, value, oldValue)
+        trigger(target, TriggerOpTypes.SET, undefined, key, value, oldValue)
       }
     }
     return result

packages/reactivity/src/collectionHandlers.ts

@@ -73,7 +73,7 @@ function add(this: SetTypes, value: unknown) {
   const hadKey = proto.has.call(target, value)
   if (!hadKey) {
     target.add(value)
-    trigger(target, TriggerOpTypes.ADD, value, value)
+    trigger(target, TriggerOpTypes.ADD, undefined, value, value)
   }
   return this
 }
@@ -94,9 +94,9 @@ function set(this: MapTypes, key: unknown, value: unknown) {
   const oldValue = get.call(target, key)
   target.set(key, value)
   if (!hadKey) {
-    trigger(target, TriggerOpTypes.ADD, key, value)
+    trigger(target, TriggerOpTypes.ADD, undefined, key, value)
   } else if (hasChanged(value, oldValue)) {
-    trigger(target, TriggerOpTypes.SET, key, value, oldValue)
+    trigger(target, TriggerOpTypes.SET, undefined, key, value, oldValue)
   }
   return this
 }
@@ -116,7 +116,7 @@ function deleteEntry(this: CollectionTypes, key: unknown) {
   // forward the operation before queueing reactions
   const result = target.delete(key)
   if (hadKey) {
-    trigger(target, TriggerOpTypes.DELETE, key, undefined, oldValue)
+    trigger(target, TriggerOpTypes.DELETE, undefined, key, undefined, oldValue)
   }
   return result
 }

packages/reactivity/src/computed.ts

@@ -33,6 +33,7 @@ export class ComputedRefImpl<T> {
   public readonly [ReactiveFlags.IS_READONLY]: boolean
 
   public _dirty = true
+  public _computedsToAskDirty: ComputedRefImpl<any>[] = []
   public _cacheable: boolean
 
   constructor(
@@ -41,10 +42,13 @@ export class ComputedRefImpl<T> {
     isReadonly: boolean,
     isSSR: boolean
   ) {
-    this.effect = new ReactiveEffect(getter, () => {
-      if (!this._dirty) {
+    this.effect = new ReactiveEffect(getter, (_c) => {
+      if (_c) {
+        this._computedsToAskDirty.push(_c)
+      }
+      else if (!this._dirty) {
         this._dirty = true
-        triggerRefValue(this)
+        triggerRefValue(this, this)
       }
     })
     this.effect.computed = this
@@ -55,11 +59,24 @@ export class ComputedRefImpl<T> {
   get value() {
     // the computed ref may get wrapped by other proxies e.g. readonly() #3376
     const self = toRaw(this)
+    if (!self._dirty) {
+      for (const computedToAskDirty of self._computedsToAskDirty) {
+        computedToAskDirty.value
+        if (self._dirty) {
+          break
+        }
+      }
+    }
     trackRefValue(self)
     if (self._dirty || !self._cacheable) {
+      const newValue = self.effect.run()!
+      if (self._value !== newValue) {
+        triggerRefValue(this, undefined)
+      }
+      self._value = newValue
       self._dirty = false
-      self._value = self.effect.run()!
     }
+    self._computedsToAskDirty.length = 0
     return self._value
   }
 

packages/reactivity/src/deferredComputed.ts

@@ -38,7 +38,7 @@ class DeferredComputedRefImpl<T> {
     let compareTarget: any
     let hasCompareTarget = false
     let scheduled = false
-    this.effect = new ReactiveEffect(getter, (computedTrigger?: boolean) => {
+    this.effect = new ReactiveEffect(getter, (_c, computedTrigger?: boolean) => {
       if (this.dep) {
         if (computedTrigger) {
           compareTarget = this._value
@@ -49,7 +49,7 @@ class DeferredComputedRefImpl<T> {
           hasCompareTarget = false
           scheduler(() => {
             if (this.effect.active && this._get() !== valueToCompare) {
-              triggerRefValue(this)
+              triggerRefValue(this, undefined)
             }
             scheduled = false
           })
@@ -59,7 +59,7 @@ class DeferredComputedRefImpl<T> {
         // deferred to be triggered in scheduler.
         for (const e of this.dep) {
           if (e.computed instanceof DeferredComputedRefImpl) {
-            e.scheduler!(true /* computedTrigger */)
+            e.scheduler!(undefined, true /* computedTrigger */)
           }
         }
       }

packages/reactivity/src/effect.ts

@@ -30,7 +30,7 @@ export let trackOpBit = 1
  */
 const maxMarkerBits = 30
 
-export type EffectScheduler = (...args: any[]) => any
+export type EffectScheduler = (computedToAskDirty: ComputedRefImpl<any> | undefined, ...args: any[]) => any
 
 export type DebuggerEvent = {
   effect: ReactiveEffect
@@ -259,6 +259,7 @@ export function trackEffects(
 export function trigger(
   target: object,
   type: TriggerOpTypes,
+  computedToAskDirty: ComputedRefImpl<any> | undefined,
   key?: unknown,
   newValue?: unknown,
   oldValue?: unknown,
@@ -323,9 +324,9 @@ export function trigger(
   if (deps.length === 1) {
     if (deps[0]) {
       if (__DEV__) {
-        triggerEffects(deps[0], eventInfo)
+        triggerEffects(deps[0], computedToAskDirty, eventInfo)
       } else {
-        triggerEffects(deps[0])
+        triggerEffects(deps[0], computedToAskDirty)
       }
     }
   } else {
@@ -336,41 +337,36 @@ export function trigger(
       }
     }
     if (__DEV__) {
-      triggerEffects(createDep(effects), eventInfo)
+      triggerEffects(createDep(effects), computedToAskDirty, eventInfo)
     } else {
-      triggerEffects(createDep(effects))
+      triggerEffects(createDep(effects), computedToAskDirty)
     }
   }
 }
 
 export function triggerEffects(
   dep: Dep | ReactiveEffect[],
+  computedToAskDirty: ComputedRefImpl<any> | undefined,
   debuggerEventExtraInfo?: DebuggerEventExtraInfo
 ) {
   // spread into array for stabilization
   const effects = isArray(dep) ? dep : [...dep]
   for (const effect of effects) {
-    if (effect.computed) {
-      triggerEffect(effect, debuggerEventExtraInfo)
-    }
-  }
-  for (const effect of effects) {
-    if (!effect.computed) {
-      triggerEffect(effect, debuggerEventExtraInfo)
-    }
+    triggerEffect(effect, computedToAskDirty, debuggerEventExtraInfo)
   }
 }
 
 function triggerEffect(
   effect: ReactiveEffect,
+  computedToAskDirty: ComputedRefImpl<any> | undefined,
   debuggerEventExtraInfo?: DebuggerEventExtraInfo
 ) {
   if (effect !== activeEffect || effect.allowRecurse) {
     if (__DEV__ && effect.onTrigger) {
       effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
     }
     if (effect.scheduler) {
-      effect.scheduler()
+      effect.scheduler(computedToAskDirty)
     } else {
       effect.run()
     }

packages/reactivity/src/ref.ts

@@ -10,6 +10,7 @@ import { isProxy, toRaw, isReactive, toReactive } from './reactive'
 import type { ShallowReactiveMarker } from './reactive'
 import { CollectionTypes } from './collectionHandlers'
 import { createDep, Dep } from './dep'
+import { ComputedRefImpl } from './computed'
 
 declare const RefSymbol: unique symbol
 export declare const RawSymbol: unique symbol
@@ -44,18 +45,18 @@ export function trackRefValue(ref: RefBase<any>) {
   }
 }
 
-export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
+export function triggerRefValue(ref: RefBase<any>, computedToAskDirty: ComputedRefImpl<any> | undefined, newVal?: any) {
   ref = toRaw(ref)
   if (ref.dep) {
     if (__DEV__) {
-      triggerEffects(ref.dep, {
+      triggerEffects(ref.dep, computedToAskDirty, {
         target: ref,
         type: TriggerOpTypes.SET,
         key: 'value',
         newValue: newVal
       })
     } else {
-      triggerEffects(ref.dep)
+      triggerEffects(ref.dep, computedToAskDirty)
     }
   }
 }
@@ -116,7 +117,7 @@ class RefImpl<T> {
     if (hasChanged(newVal, this._rawValue)) {
       this._rawValue = newVal
       this._value = this.__v_isShallow ? newVal : toReactive(newVal)
-      triggerRefValue(this, newVal)
+      triggerRefValue(this, undefined, newVal)
     }
   }
 }
@@ -169,7 +170,7 @@ class CustomRefImpl<T> {
   constructor(factory: CustomRefFactory<T>) {
     const { get, set } = factory(
       () => trackRefValue(this),
-      () => triggerRefValue(this)
+      () => triggerRefValue(this, undefined)
     )
     this._get = get
     this._set = set

packages/runtime-core/src/compat/global.ts

@@ -647,7 +647,7 @@ function defineReactiveSimple(obj: any, key: string, val: any) {
     },
     set(newVal) {
       val = isObject(newVal) ? reactive(newVal) : newVal
-      trigger(obj, TriggerOpTypes.SET, key, newVal)
+      trigger(obj, TriggerOpTypes.SET, undefined, key, newVal)
     }
   })
 }

packages/runtime-core/src/componentProps.ts

@@ -322,7 +322,7 @@ export function updateProps(
 
   // trigger updates for $attrs in case it's used in component slots
   if (hasAttrsChanged) {
-    trigger(instance, TriggerOpTypes.SET, '$attrs')
+    trigger(instance, TriggerOpTypes.SET, undefined, '$attrs')
   }
 
   if (__DEV__) {