perf(reactivity): high efficiency effect()

packages/reactivity/__tests__/computed.spec.ts

@@ -288,4 +288,75 @@ describe('reactivity/computed', () => {
       oldValue: 2
     })
   })
+
+  it('chained computed value on-demand trigger', () => {
+    const minSpy = vi.fn()
+    const hourSpy = vi.fn()
+
+    const sec = ref(0)
+    const min = computed(() => {
+      minSpy()
+      return Math.floor(sec.value / 60)
+    })
+    const hour = computed(() => {
+      hourSpy()
+      return Math.floor(min.value / 60)
+    })
+
+    for (sec.value = 0; sec.value < 1000; sec.value++) {
+      hour.value
+    }
+
+    expect(minSpy).toHaveBeenCalledTimes(1000)
+    expect(hourSpy).toHaveBeenCalledTimes(17)
+  })
+
+  it('effect callback on-demand trigger', () => {
+    const effectSpy = vi.fn()
+
+    const sec = ref(0)
+    const min = computed(() => {
+      return Math.floor(sec.value / 60)
+    })
+    const hour = computed(() => {
+      return Math.floor(min.value / 60)
+    })
+
+    effect(() => {
+      effectSpy()
+      min.value
+      hour.value
+    })
+
+    for (sec.value = 0; sec.value < 1000; sec.value++) {}
+
+    expect(effectSpy).toHaveBeenCalledTimes(17)
+  })
+
+  it('chained computed value urgent assessment edge case', () => {
+    const cSpy = vi.fn()
+
+    const a = ref<null | { v: number }>({
+      v: 1
+    })
+    const b = computed(() => {
+      return a.value
+    })
+    const c = computed(() => {
+      cSpy()
+      return b.value?.v
+    })
+    const d = computed(() => {
+      if (b.value) {
+        return c.value
+      }
+      return 0
+    })
+
+    d.value
+    a.value!.v = 2
+    a.value = null
+    d.value
+    expect(cSpy).toHaveBeenCalledTimes(1)
+  })
 })

packages/reactivity/src/computed.ts

@@ -1,6 +1,11 @@
-import { DebuggerOptions, ReactiveEffect } from './effect'
+import {
+  DebuggerOptions,
+  pauseTracking,
+  ReactiveEffect,
+  resetTracking
+} from './effect'
 import { Ref, trackRefValue, triggerRefValue } from './ref'
-import { isFunction, NOOP } from '@vue/shared'
+import { hasChanged, isFunction, NOOP } from '@vue/shared'
 import { ReactiveFlags, toRaw } from './reactive'
 import { Dep } from './dep'
 
@@ -33,6 +38,8 @@ export class ComputedRefImpl<T> {
   public readonly [ReactiveFlags.IS_READONLY]: boolean = false
 
   public _dirty = true
+  public _scheduled = false
+  public _deferredComputeds: ComputedRefImpl<any>[] = []
   public _cacheable: boolean
 
   constructor(
@@ -41,10 +48,17 @@ export class ComputedRefImpl<T> {
     isReadonly: boolean,
     isSSR: boolean
   ) {
-    this.effect = new ReactiveEffect(getter, () => {
+    this.effect = new ReactiveEffect(getter, deferredComputed => {
       if (!this._dirty) {
-        this._dirty = true
-        triggerRefValue(this)
+        if (deferredComputed) {
+          this._deferredComputeds.push(deferredComputed)
+        } else {
+          this._dirty = true
+        }
+        if (!this._scheduled) {
+          this._scheduled = true
+          triggerRefValue(this, this)
+        }
       }
     })
     this.effect.computed = this
@@ -55,11 +69,33 @@ 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 && self._deferredComputeds.length) {
+      if (self._deferredComputeds.length >= 2) {
+        self._deferredComputeds = self._deferredComputeds.sort(
+          (a, b) =>
+            self.effect.deps.indexOf(a.dep!) - self.effect.deps.indexOf(b.dep!)
+        )
+      }
+      pauseTracking()
+      for (const deferredComputed of self._deferredComputeds) {
+        deferredComputed.value
+        if (self._dirty) {
+          break
+        }
+      }
+      resetTracking()
+    }
     trackRefValue(self)
     if (self._dirty || !self._cacheable) {
+      const newValue = self.effect.run()!
+      if (hasChanged(self._value, newValue)) {
+        triggerRefValue(self, undefined)
+      }
+      self._value = newValue
       self._dirty = false
-      self._value = self.effect.run()!
+      self._scheduled = false
     }
+    self._deferredComputeds.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, (_deferredComputed, 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,10 @@ export let trackOpBit = 1
  */
 const maxMarkerBits = 30
 
-export type EffectScheduler = (...args: any[]) => any
+export type EffectScheduler = (
+  deferredComputed: ComputedRefImpl<any> | undefined,
+  ...args: any[]
+) => any
 
 export type DebuggerEvent = {
   effect: ReactiveEffect
@@ -185,7 +188,23 @@ export function effect<T = any>(
     fn = (fn as ReactiveEffectRunner).effect.fn
   }
 
-  const _effect = new ReactiveEffect(fn)
+  let _dirty = false
+  let _scheduled = false
+  let _deferredComputeds: ComputedRefImpl<any>[] = []
+
+  const _effect = new ReactiveEffect(fn, deferredComputed => {
+    if (!_dirty) {
+      if (deferredComputed) {
+        _deferredComputeds.push(deferredComputed)
+      } else {
+        _dirty = true
+      }
+      if (!_scheduled) {
+        _scheduled = true
+        pendingEffectRunners.push(run)
+      }
+    }
+  })
   if (options) {
     extend(_effect, options)
     if (options.scope) recordEffectScope(_effect, options.scope)
@@ -196,6 +215,28 @@ export function effect<T = any>(
   const runner = _effect.run.bind(_effect) as ReactiveEffectRunner
   runner.effect = _effect
   return runner
+
+  function run() {
+    if (!_dirty && _deferredComputeds.length) {
+      if (_deferredComputeds.length >= 2) {
+        _deferredComputeds = _deferredComputeds.sort(
+          (a, b) => _effect.deps.indexOf(a.dep!) - _effect.deps.indexOf(b.dep!)
+        )
+      }
+      for (const deferredComputed of _deferredComputeds) {
+        deferredComputed.value
+        if (_dirty) {
+          break
+        }
+      }
+    }
+    if (_dirty) {
+      _dirty = false
+      _effect.run()
+    }
+    _deferredComputeds.length = 0
+    _scheduled = false
+  }
 }
 
 /**
@@ -370,9 +411,9 @@ export function trigger(
   if (deps.length === 1) {
     if (deps[0]) {
       if (__DEV__) {
-        triggerEffects(deps[0], eventInfo)
+        triggerEffects(deps[0], undefined, eventInfo)
       } else {
-        triggerEffects(deps[0])
+        triggerEffects(deps[0], undefined)
       }
     }
   } else {
@@ -383,45 +424,55 @@ export function trigger(
       }
     }
     if (__DEV__) {
-      triggerEffects(createDep(effects), eventInfo)
+      triggerEffects(createDep(effects), undefined, eventInfo)
     } else {
-      triggerEffects(createDep(effects))
+      triggerEffects(createDep(effects), undefined)
     }
   }
 }
 
 export function triggerEffects(
   dep: Dep | ReactiveEffect[],
+  deferredComputed: 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)
+      triggerEffect(effect, deferredComputed, debuggerEventExtraInfo)
     }
   }
   for (const effect of effects) {
     if (!effect.computed) {
-      triggerEffect(effect, debuggerEventExtraInfo)
+      triggerEffect(effect, deferredComputed, debuggerEventExtraInfo)
     }
   }
 }
 
+const pendingEffectRunners: (() => void)[] = []
+
 function triggerEffect(
   effect: ReactiveEffect,
+  deferredComputed: ComputedRefImpl<any> | undefined,
   debuggerEventExtraInfo?: DebuggerEventExtraInfo
 ) {
+  const isRootTrigger = effectTrackDepth === 0
   if (effect !== activeEffect || effect.allowRecurse) {
     if (__DEV__ && effect.onTrigger) {
       effect.onTrigger(extend({ effect }, debuggerEventExtraInfo))
     }
     if (effect.scheduler) {
-      effect.scheduler()
+      effect.scheduler(deferredComputed)
     } else {
       effect.run()
     }
   }
+  if (isRootTrigger) {
+    while (pendingEffectRunners.length) {
+      pendingEffectRunners.shift()!()
+    }
+  }
 }
 
 export function getDepFromReactive(object: any, key: string | number | symbol) {

packages/reactivity/src/ref.ts

@@ -16,6 +16,7 @@ import {
   isShallow
 } from './reactive'
 import type { ShallowReactiveMarker } from './reactive'
+import type { ComputedRefImpl } from './computed'
 import { CollectionTypes } from './collectionHandlers'
 import { createDep, Dep } from './dep'
 
@@ -52,19 +53,23 @@ export function trackRefValue(ref: RefBase<any>) {
   }
 }
 
-export function triggerRefValue(ref: RefBase<any>, newVal?: any) {
+export function triggerRefValue(
+  ref: RefBase<any>,
+  deferredComputed: ComputedRefImpl<any> | undefined,
+  newVal?: any
+) {
   ref = toRaw(ref)
   const dep = ref.dep
   if (dep) {
     if (__DEV__) {
-      triggerEffects(dep, {
+      triggerEffects(dep, deferredComputed, {
         target: ref,
         type: TriggerOpTypes.SET,
         key: 'value',
         newValue: newVal
       })
     } else {
-      triggerEffects(dep)
+      triggerEffects(dep, deferredComputed)
     }
   }
 }
@@ -155,7 +160,7 @@ class RefImpl<T> {
     if (hasChanged(newVal, this._rawValue)) {
       this._rawValue = newVal
       this._value = useDirectValue ? newVal : toReactive(newVal)
-      triggerRefValue(this, newVal)
+      triggerRefValue(this, undefined, newVal)
     }
   }
 }
@@ -186,7 +191,7 @@ class RefImpl<T> {
  * @see {@link https://vuejs.org/api/reactivity-advanced.html#triggerref}
  */
 export function triggerRef(ref: Ref) {
-  triggerRefValue(ref, __DEV__ ? ref.value : void 0)
+  triggerRefValue(ref, undefined, __DEV__ ? ref.value : void 0)
 }
 
 export type MaybeRef<T = any> = T | Ref<T>
@@ -282,7 +287,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