refactor(reactivity): associate effects and effect scopes based on doubly linked list (deps, subs)

Author: johnsoncodehk

packages/reactivity/__tests__/computed.spec.ts

@@ -467,12 +467,8 @@ describe('reactivity/computed', () => {
     const c2 = computed(() => c1.value) as unknown as ComputedRefImpl
 
     c2.value
-    expect(
-      c1.flags & (SubscriberFlags.Dirty | SubscriberFlags.PendingComputed),
-    ).toBe(0)
-    expect(
-      c2.flags & (SubscriberFlags.Dirty | SubscriberFlags.PendingComputed),
-    ).toBe(0)
+    expect(c1.flags & (SubscriberFlags.Dirty | SubscriberFlags.Pending)).toBe(0)
+    expect(c2.flags & (SubscriberFlags.Dirty | SubscriberFlags.Pending)).toBe(0)
   })
 
   it('should chained computeds dirtyLevel update with first computed effect', () => {

packages/reactivity/__tests__/effectScope.spec.ts

@@ -20,7 +20,7 @@ describe('reactivity/effect/scope', () => {
 
   it('should accept zero argument', () => {
     const scope = effectScope()
-    expect(scope.effects.length).toBe(0)
+    expect(getEffectsCount(scope)).toBe(0)
   })
 
   it('should return run value', () => {
@@ -47,7 +47,7 @@ describe('reactivity/effect/scope', () => {
       expect(dummy).toBe(7)
     })
 
-    expect(scope.effects.length).toBe(1)
+    expect(getEffectsCount(scope)).toBe(1)
   })
 
   it('stop', () => {
@@ -60,7 +60,7 @@ describe('reactivity/effect/scope', () => {
       effect(() => (doubled = counter.num * 2))
     })
 
-    expect(scope.effects.length).toBe(2)
+    expect(getEffectsCount(scope)).toBe(2)
 
     expect(dummy).toBe(0)
     counter.num = 7
@@ -87,9 +87,8 @@ describe('reactivity/effect/scope', () => {
       })
     })
 
-    expect(scope.effects.length).toBe(1)
-    expect(scope.scopes!.length).toBe(1)
-    expect(scope.scopes![0]).toBeInstanceOf(EffectScope)
+    expect(getEffectsCount(scope)).toBe(2)
+    expect(scope.deps?.nextDep?.dep).toBeInstanceOf(EffectScope)
 
     expect(dummy).toBe(0)
     counter.num = 7
@@ -117,7 +116,7 @@ describe('reactivity/effect/scope', () => {
       })
     })
 
-    expect(scope.effects.length).toBe(1)
+    expect(getEffectsCount(scope)).toBe(1)
 
     expect(dummy).toBe(0)
     counter.num = 7
@@ -142,13 +141,13 @@ describe('reactivity/effect/scope', () => {
       effect(() => (dummy = counter.num))
     })
 
-    expect(scope.effects.length).toBe(1)
+    expect(getEffectsCount(scope)).toBe(1)
 
     scope.run(() => {
       effect(() => (doubled = counter.num * 2))
     })
 
-    expect(scope.effects.length).toBe(2)
+    expect(getEffectsCount(scope)).toBe(2)
 
     counter.num = 7
     expect(dummy).toBe(7)
@@ -166,7 +165,7 @@ describe('reactivity/effect/scope', () => {
       effect(() => (dummy = counter.num))
     })
 
-    expect(scope.effects.length).toBe(1)
+    expect(getEffectsCount(scope)).toBe(1)
 
     scope.stop()
 
@@ -176,7 +175,7 @@ describe('reactivity/effect/scope', () => {
 
     expect('[Vue warn] cannot run an inactive effect scope.').toHaveBeenWarned()
 
-    expect(scope.effects.length).toBe(0)
+    expect(getEffectsCount(scope)).toBe(0)
 
     counter.num = 7
     expect(dummy).toBe(0)
@@ -224,9 +223,9 @@ describe('reactivity/effect/scope', () => {
   it('should dereference child scope from parent scope after stopping child scope (no memleaks)', () => {
     const parent = effectScope()
     const child = parent.run(() => effectScope())!
-    expect(parent.scopes!.includes(child)).toBe(true)
+    expect(parent.deps?.dep).toBe(child)
     child.stop()
-    expect(parent.scopes!.includes(child)).toBe(false)
+    expect(parent.deps).toBeUndefined()
   })
 
   it('test with higher level APIs', async () => {
@@ -372,7 +371,17 @@ describe('reactivity/effect/scope', () => {
     expect(watcherCalls).toBe(3)
     expect(cleanupCalls).toBe(1)
 
-    expect(scope.effects.length).toBe(0)
+    expect(getEffectsCount(scope)).toBe(0)
     expect(scope.cleanups.length).toBe(0)
   })
 })
+
+function getEffectsCount(scope: EffectScope): number {
+  let n = 0
+  for (let dep = scope.deps; dep !== undefined; dep = dep.nextDep) {
+    if ('notify' in dep.dep) {
+      n++
+    }
+  }
+  return n
+}

packages/reactivity/src/computed.ts

@@ -14,11 +14,11 @@ import {
   type Link,
   type Subscriber,
   SubscriberFlags,
+  checkDirty,
   endTracking,
   link,
   processComputedUpdate,
   startTracking,
-  updateDirtyFlag,
 } from './system'
 import { warn } from './warning'
 
@@ -66,7 +66,7 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
   // Subscriber
   deps: Link | undefined = undefined
   depsTail: Link | undefined = undefined
-  flags: SubscriberFlags = SubscriberFlags.Computed | SubscriberFlags.Dirty
+  flags: SubscriberFlags = SubscriberFlags.Dirty
 
   /**
    * @internal
@@ -93,12 +93,13 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
    */
   get _dirty(): boolean {
     const flags = this.flags
-    if (
-      flags & SubscriberFlags.Dirty ||
-      (flags & SubscriberFlags.PendingComputed &&
-        updateDirtyFlag(this, this.flags))
-    ) {
-      return true
+    if (flags & (SubscriberFlags.Dirty | SubscriberFlags.Pending)) {
+      if (flags & SubscriberFlags.Dirty || checkDirty(this.deps!)) {
+        this.flags = flags | SubscriberFlags.Dirty
+        return true
+      } else {
+        this.flags = flags & ~SubscriberFlags.Pending
+      }
     }
     return false
   }
@@ -110,7 +111,7 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
     if (v) {
       this.flags |= SubscriberFlags.Dirty
     } else {
-      this.flags &= ~(SubscriberFlags.Dirty | SubscriberFlags.PendingComputed)
+      this.flags &= ~(SubscriberFlags.Dirty | SubscriberFlags.Pending)
     }
   }
 
@@ -134,7 +135,7 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
 
   get value(): T {
     const flags = this.flags
-    if (flags & (SubscriberFlags.Dirty | SubscriberFlags.PendingComputed)) {
+    if (flags & (SubscriberFlags.Dirty | SubscriberFlags.Pending)) {
       processComputedUpdate(this, flags)
     }
     if (activeSub !== undefined) {

packages/reactivity/src/effect.ts

@@ -6,9 +6,11 @@ import {
   type Link,
   type Subscriber,
   SubscriberFlags,
+  checkDirty,
   endTracking,
+  link,
   startTracking,
-  updateDirtyFlag,
+  unlink,
 } from './system'
 import { warn } from './warning'
 
@@ -56,7 +58,11 @@ export class ReactiveEffect<T = any> implements ReactiveEffectOptions {
   // Subscriber
   deps: Link | undefined = undefined
   depsTail: Link | undefined = undefined
-  flags: number = SubscriberFlags.Effect
+  flags: number = 0
+
+  // Dependency
+  subs: Link | undefined = undefined
+  subsTail: Link | undefined = undefined
 
   /**
    * @internal
@@ -69,7 +75,7 @@ export class ReactiveEffect<T = any> implements ReactiveEffectOptions {
 
   constructor(public fn: () => T) {
     if (activeEffectScope && activeEffectScope.active) {
-      activeEffectScope.effects.push(this)
+      link(this, activeEffectScope)
     }
   }
 
@@ -99,7 +105,7 @@ export class ReactiveEffect<T = any> implements ReactiveEffectOptions {
     if (!(flags & EffectFlags.PAUSED)) {
       this.scheduler()
     } else {
-      this.flags |= EffectFlags.NOTIFIED
+      this.flags = flags | EffectFlags.NOTIFIED
     }
   }
 
@@ -132,11 +138,12 @@ export class ReactiveEffect<T = any> implements ReactiveEffectOptions {
       }
       setActiveSub(prevSub)
       endTracking(this)
+      const flags = this.flags
       if (
-        this.flags & SubscriberFlags.Recursed &&
-        this.flags & EffectFlags.ALLOW_RECURSE
+        flags & SubscriberFlags.Recursed &&
+        flags & EffectFlags.ALLOW_RECURSE
       ) {
-        this.flags &= ~SubscriberFlags.Recursed
+        this.flags = flags & ~SubscriberFlags.Recursed
         this.notify()
       }
     }
@@ -149,16 +156,22 @@ export class ReactiveEffect<T = any> implements ReactiveEffectOptions {
       cleanupEffect(this)
       this.onStop && this.onStop()
       this.flags |= EffectFlags.STOP
+
+      if (this.subs !== undefined) {
+        unlink(this.subs)
+      }
     }
   }
 
   get dirty(): boolean {
     const flags = this.flags
-    if (
-      flags & SubscriberFlags.Dirty ||
-      (flags & SubscriberFlags.PendingComputed && updateDirtyFlag(this, flags))
-    ) {
-      return true
+    if (flags & (SubscriberFlags.Dirty | SubscriberFlags.Pending)) {
+      if (flags & SubscriberFlags.Dirty || checkDirty(this.deps!)) {
+        this.flags = flags | SubscriberFlags.Dirty
+        return true
+      } else {
+        this.flags = flags & ~SubscriberFlags.Pending
+      }
     }
     return false
   }