perf(reactivity): refactor reactivity core by porting alien-signals (#12349)

Author: johnsoncodehk

packages/reactivity/__tests__/computed.spec.ts

@@ -25,8 +25,9 @@ import {
   toRaw,
   triggerRef,
 } from '../src'
-import { EffectFlags, pauseTracking, resetTracking } from '../src/effect'
 import type { ComputedRef, ComputedRefImpl } from '../src/computed'
+import { pauseTracking, resetTracking } from '../src/effect'
+import { SubscriberFlags } from '../src/system'
 
 describe('reactivity/computed', () => {
   it('should return updated value', () => {
@@ -409,9 +410,9 @@ describe('reactivity/computed', () => {
     a.value++
     e.value
 
-    expect(e.deps!.dep).toBe(b.dep)
-    expect(e.deps!.nextDep!.dep).toBe(d.dep)
-    expect(e.deps!.nextDep!.nextDep!.dep).toBe(c.dep)
+    expect(e.deps!.dep).toBe(b)
+    expect(e.deps!.nextDep!.dep).toBe(d)
+    expect(e.deps!.nextDep!.nextDep!.dep).toBe(c)
     expect(cSpy).toHaveBeenCalledTimes(2)
 
     a.value++
@@ -466,8 +467,8 @@ describe('reactivity/computed', () => {
     const c2 = computed(() => c1.value) as unknown as ComputedRefImpl
 
     c2.value
-    expect(c1.flags & EffectFlags.DIRTY).toBeFalsy()
-    expect(c2.flags & EffectFlags.DIRTY).toBeFalsy()
+    expect(c1.flags & SubscriberFlags.Dirtys).toBe(0)
+    expect(c2.flags & SubscriberFlags.Dirtys).toBe(0)
   })
 
   it('should chained computeds dirtyLevel update with first computed effect', () => {

packages/reactivity/__tests__/effect.spec.ts

@@ -1,3 +1,14 @@
+import {
+  computed,
+  h,
+  nextTick,
+  nodeOps,
+  ref,
+  render,
+  serializeInner,
+} from '@vue/runtime-test'
+import { ITERATE_KEY, getDepFromReactive } from '../src/dep'
+import { onEffectCleanup, pauseTracking, resetTracking } from '../src/effect'
 import {
   type DebuggerEvent,
   type ReactiveEffectRunner,
@@ -11,23 +22,7 @@ import {
   stop,
   toRaw,
 } from '../src/index'
-import { type Dep, ITERATE_KEY, getDepFromReactive } from '../src/dep'
-import {
-  computed,
-  h,
-  nextTick,
-  nodeOps,
-  ref,
-  render,
-  serializeInner,
-} from '@vue/runtime-test'
-import {
-  endBatch,
-  onEffectCleanup,
-  pauseTracking,
-  resetTracking,
-  startBatch,
-} from '../src/effect'
+import { type Dependency, endBatch, startBatch } from '../src/system'
 
 describe('reactivity/effect', () => {
   it('should run the passed function once (wrapped by a effect)', () => {
@@ -1183,12 +1178,12 @@ describe('reactivity/effect', () => {
   })
 
   describe('dep unsubscribe', () => {
-    function getSubCount(dep: Dep | undefined) {
+    function getSubCount(dep: Dependency | undefined) {
       let count = 0
       let sub = dep!.subs
       while (sub) {
         count++
-        sub = sub.prevSub
+        sub = sub.nextSub
       }
       return count
     }

packages/reactivity/__tests__/gc.spec.ts

@@ -2,6 +2,7 @@ import {
   type ComputedRef,
   computed,
   effect,
+  effectScope,
   reactive,
   shallowRef as ref,
   toRaw,
@@ -19,7 +20,7 @@ describe.skipIf(!global.gc)('reactivity/gc', () => {
   }
 
   // #9233
-  it('should release computed cache', async () => {
+  it.todo('should release computed cache', async () => {
     const src = ref<{} | undefined>({})
     // @ts-expect-error ES2021 API
     const srcRef = new WeakRef(src.value!)
@@ -34,7 +35,7 @@ describe.skipIf(!global.gc)('reactivity/gc', () => {
     expect(srcRef.deref()).toBeUndefined()
   })
 
-  it('should release reactive property dep', async () => {
+  it.todo('should release reactive property dep', async () => {
     const src = reactive({ foo: 1 })
 
     let c: ComputedRef | undefined = computed(() => src.foo)
@@ -79,4 +80,36 @@ describe.skipIf(!global.gc)('reactivity/gc', () => {
     src.foo++
     expect(spy).toHaveBeenCalledTimes(2)
   })
+
+  it('should release computed that untrack by effect', async () => {
+    const src = ref(0)
+    // @ts-expect-error ES2021 API
+    const c = new WeakRef(computed(() => src.value))
+    const scope = effectScope()
+
+    scope.run(() => {
+      effect(() => c.deref().value)
+    })
+
+    expect(c.deref()).toBeDefined()
+    scope.stop()
+    await gc()
+    expect(c.deref()).toBeUndefined()
+  })
+
+  it('should release computed that untrack by effectScope', async () => {
+    const src = ref(0)
+    // @ts-expect-error ES2021 API
+    const c = new WeakRef(computed(() => src.value))
+    const scope = effectScope()
+
+    scope.run(() => {
+      c.deref().value
+    })
+
+    expect(c.deref()).toBeDefined()
+    scope.stop()
+    await gc()
+    expect(c.deref()).toBeUndefined()
+  })
 })

packages/reactivity/src/arrayInstrumentations.ts

@@ -1,8 +1,9 @@
+import { isArray } from '@vue/shared'
 import { TrackOpTypes } from './constants'
-import { endBatch, pauseTracking, resetTracking, startBatch } from './effect'
-import { isProxy, isShallow, toRaw, toReactive } from './reactive'
 import { ARRAY_ITERATE_KEY, track } from './dep'
-import { isArray } from '@vue/shared'
+import { pauseTracking, resetTracking } from './effect'
+import { isProxy, isShallow, toRaw, toReactive } from './reactive'
+import { endBatch, startBatch } from './system'
 
 /**
  * Track array iteration and return:

packages/reactivity/src/computed.ts

@@ -1,17 +1,27 @@
-import { isFunction } from '@vue/shared'
+import { hasChanged, isFunction } from '@vue/shared'
+import { ReactiveFlags, TrackOpTypes } from './constants'
+import { onTrack, setupFlagsHandler } from './debug'
 import {
   type DebuggerEvent,
   type DebuggerOptions,
-  EffectFlags,
-  type Subscriber,
   activeSub,
-  batch,
-  refreshComputed,
+  activeTrackId,
+  nextTrackId,
+  setActiveSub,
 } from './effect'
+import { activeEffectScope } from './effectScope'
 import type { Ref } from './ref'
+import {
+  type Dependency,
+  type IComputed,
+  type Link,
+  SubscriberFlags,
+  checkDirty,
+  endTrack,
+  link,
+  startTrack,
+} from './system'
 import { warn } from './warning'
-import { Dep, type Link, globalVersion } from './dep'
-import { ReactiveFlags, TrackOpTypes } from './constants'
 
 declare const ComputedRefSymbol: unique symbol
 declare const WritableComputedRefSymbol: unique symbol
@@ -44,15 +54,23 @@ export interface WritableComputedOptions<T, S = T> {
  * @private exported by @vue/reactivity for Vue core use, but not exported from
  * the main vue package
  */
-export class ComputedRefImpl<T = any> implements Subscriber {
+export class ComputedRefImpl<T = any> implements IComputed {
   /**
    * @internal
    */
-  _value: any = undefined
-  /**
-   * @internal
-   */
-  readonly dep: Dep = new Dep(this)
+  _value: T | undefined = undefined
+  version = 0
+
+  // Dependency
+  subs: Link | undefined = undefined
+  subsTail: Link | undefined = undefined
+  lastTrackedId = 0
+
+  // Subscriber
+  deps: Link | undefined = undefined
+  depsTail: Link | undefined = undefined
+  flags: SubscriberFlags = SubscriberFlags.Dirty
+
   /**
    * @internal
    */
@@ -63,34 +81,39 @@ export class ComputedRefImpl<T = any> implements Subscriber {
    */
   readonly __v_isReadonly: boolean
   // TODO isolatedDeclarations ReactiveFlags.IS_READONLY
-  // A computed is also a subscriber that tracks other deps
-  /**
-   * @internal
-   */
-  deps?: Link = undefined
-  /**
-   * @internal
-   */
-  depsTail?: Link = undefined
-  /**
-   * @internal
-   */
-  flags: EffectFlags = EffectFlags.DIRTY
-  /**
-   * @internal
-   */
-  globalVersion: number = globalVersion - 1
-  /**
-   * @internal
-   */
-  isSSR: boolean
-  /**
-   * @internal
-   */
-  next?: Subscriber = undefined
 
   // for backwards compat
-  effect: this = this
+  get effect(): this {
+    return this
+  }
+  // for backwards compat
+  get dep(): Dependency {
+    return this
+  }
+  // for backwards compat
+  get _dirty(): boolean {
+    const flags = this.flags
+    if (flags & SubscriberFlags.Dirty) {
+      return true
+    } else if (flags & SubscriberFlags.ToCheckDirty) {
+      if (checkDirty(this.deps!)) {
+        this.flags |= SubscriberFlags.Dirty
+        return true
+      } else {
+        this.flags &= ~SubscriberFlags.ToCheckDirty
+        return false
+      }
+    }
+    return false
+  }
+  set _dirty(v: boolean) {
+    if (v) {
+      this.flags |= SubscriberFlags.Dirty
+    } else {
+      this.flags &= ~SubscriberFlags.Dirtys
+    }
+  }
+
   // dev only
   onTrack?: (event: DebuggerEvent) => void
   // dev only
@@ -105,43 +128,34 @@ export class ComputedRefImpl<T = any> implements Subscriber {
   constructor(
     public fn: ComputedGetter<T>,
     private readonly setter: ComputedSetter<T> | undefined,
-    isSSR: boolean,
   ) {
     this[ReactiveFlags.IS_READONLY] = !setter
-    this.isSSR = isSSR
-  }
-
-  /**
-   * @internal
-   */
-  notify(): true | void {
-    this.flags |= EffectFlags.DIRTY
-    if (
-      !(this.flags & EffectFlags.NOTIFIED) &&
-      // avoid infinite self recursion
-      activeSub !== this
-    ) {
-      batch(this, true)
-      return true
-    } else if (__DEV__) {
-      // TODO warn
+    if (__DEV__) {
+      setupFlagsHandler(this)
     }
   }
 
   get value(): T {
-    const link = __DEV__
-      ? this.dep.track({
+    if (this._dirty) {
+      this.update()
+    }
+    if (activeTrackId !== 0 && this.lastTrackedId !== activeTrackId) {
+      if (__DEV__) {
+        onTrack(activeSub!, {
           target: this,
           type: TrackOpTypes.GET,
           key: 'value',
         })
-      : this.dep.track()
-    refreshComputed(this)
-    // sync version after evaluation
-    if (link) {
-      link.version = this.dep.version
+      }
+      this.lastTrackedId = activeTrackId
+      link(this, activeSub!).version = this.version
+    } else if (
+      activeEffectScope !== undefined &&
+      this.lastTrackedId !== activeEffectScope.trackId
+    ) {
+      link(this, activeEffectScope)
     }
-    return this._value
+    return this._value!
   }
 
   set value(newValue) {
@@ -151,6 +165,27 @@ export class ComputedRefImpl<T = any> implements Subscriber {
       warn('Write operation failed: computed value is readonly')
     }
   }
+
+  update(): boolean {
+    const prevSub = activeSub
+    const prevTrackId = activeTrackId
+    setActiveSub(this, nextTrackId())
+    startTrack(this)
+    const oldValue = this._value
+    let newValue: T
+    try {
+      newValue = this.fn(oldValue)
+    } finally {
+      setActiveSub(prevSub, prevTrackId)
+      endTrack(this)
+    }
+    if (hasChanged(oldValue, newValue)) {
+      this._value = newValue
+      this.version++
+      return true
+    }
+    return false
+  }
 }
 
 /**
@@ -209,7 +244,7 @@ export function computed<T>(
     setter = getterOrOptions.set
   }
 
-  const cRef = new ComputedRefImpl(getter, setter, isSSR)
+  const cRef = new ComputedRefImpl(getter, setter)
 
   if (__DEV__ && debugOptions && !isSSR) {
     cRef.onTrack = debugOptions.onTrack