perf(reactivity): use fast path for notify a single effect

Author: johnsoncodehk

packages/reactivity/src/computed.ts

@@ -17,7 +17,7 @@ import {
   checkDirty,
   endTracking,
   link,
-  processComputedUpdate,
+  shallowPropagate,
   startTracking,
 } from './system'
 import { warn } from './warning'
@@ -138,8 +138,18 @@ export class ComputedRefImpl<T = any> implements Dependency, Subscriber {
 
   get value(): T {
     const flags = this.flags
-    if (flags & (SubscriberFlags.Dirty | SubscriberFlags.Pending)) {
-      processComputedUpdate(this, flags)
+    if (
+      flags & SubscriberFlags.Dirty ||
+      (flags & SubscriberFlags.Pending && checkDirty(this.deps!))
+    ) {
+      if (this.update()) {
+        const subs = this.subs
+        if (subs !== undefined) {
+          shallowPropagate(subs)
+        }
+      }
+    } else if (flags & SubscriberFlags.Pending) {
+      this.flags = flags & ~SubscriberFlags.Pending
     }
     if (activeSub !== undefined) {
       if (__DEV__) {

packages/reactivity/src/system.ts

@@ -47,7 +47,7 @@ export function startBatch(): void {
 }
 
 export function endBatch(): void {
-  if (!--batchDepth) {
+  if (!--batchDepth && notifyBufferLength) {
     processEffectNotifications()
   }
 }
@@ -62,39 +62,38 @@ export function link(dep: Dependency, sub: Subscriber): void {
     sub.depsTail = nextDep
     return
   }
-  const depLastSub = dep.subsTail
+  const prevSub = dep.subsTail
   if (
-    depLastSub !== undefined &&
-    depLastSub.sub === sub &&
-    isValidLink(depLastSub, sub)
+    prevSub !== undefined &&
+    prevSub.sub === sub &&
+    isValidLink(prevSub, sub)
   ) {
     return
   }
-  const newLink: Link = {
-    dep,
-    sub,
-    prevDep,
-    nextDep,
-    prevSub: undefined,
-    nextSub: undefined,
+  const newLink =
+    (sub.depsTail =
+    dep.subsTail =
+      {
+        dep,
+        sub,
+        prevDep,
+        nextDep,
+        prevSub,
+        nextSub: undefined,
+      })
+  if (nextDep !== undefined) {
+    nextDep.prevDep = newLink
   }
   if (prevDep === undefined) {
     sub.deps = newLink
   } else {
     prevDep.nextDep = newLink
   }
-  if (dep.subs === undefined) {
+  if (prevSub === undefined) {
     dep.subs = newLink
   } else {
-    const oldTail = dep.subsTail!
-    newLink.prevSub = oldTail
-    oldTail.nextSub = newLink
-  }
-  if (nextDep !== undefined) {
-    nextDep.prevDep = newLink
+    prevSub.nextSub = newLink
   }
-  sub.depsTail = newLink
-  dep.subsTail = newLink
 }
 
 export function unlink(
@@ -180,7 +179,11 @@ export function propagate(current: Link): void {
 
     if (shouldNotify) {
       if ('notify' in sub) {
-        notifyBuffer[notifyBufferLength++] = sub
+        if (!batchDepth && !notifyBufferLength && next === undefined) {
+          sub.notify()
+        } else {
+          notifyBuffer[notifyBufferLength++] = sub
+        }
       } else {
         const subSubs = (sub as Dependency).subs
         if (subSubs !== undefined) {
@@ -225,7 +228,7 @@ export function propagate(current: Link): void {
     break
   } while (true)
 
-  if (!batchDepth) {
+  if (!batchDepth && notifyBufferLength) {
     processEffectNotifications()
   }
 }
@@ -251,22 +254,6 @@ export function endTracking(sub: Subscriber): void {
   sub.flags &= ~SubscriberFlags.Tracking
 }
 
-export function processComputedUpdate(
-  computed: Computed,
-  flags: SubscriberFlags,
-): void {
-  if (flags & SubscriberFlags.Dirty || checkDirty(computed.deps!)) {
-    if (computed.update()) {
-      const subs = computed.subs
-      if (subs !== undefined) {
-        shallowPropagate(subs)
-      }
-    }
-  } else {
-    computed.flags = flags & ~SubscriberFlags.Pending
-  }
-}
-
 export function processEffectNotifications(): void {
   while (notifyIndex < notifyBufferLength) {
     const effect = notifyBuffer[notifyIndex]!
@@ -348,7 +335,7 @@ export function checkDirty(current: Link): boolean {
   } while (true)
 }
 
-function shallowPropagate(link: Link): void {
+export function shallowPropagate(link: Link): void {
   do {
     const sub = link.sub
     const subFlags = sub.flags