refactor(reactivity): combine notify() and scheduler() in ReactiveEffect

Author: johnsoncodehk

packages/reactivity/src/effect.ts

@@ -92,9 +92,7 @@ export class ReactiveEffect<T = any>
   }
 
   pause(): void {
-    if (!(this.flags & EffectFlags.PAUSED)) {
-      this.flags |= EffectFlags.PAUSED
-    }
+    this.flags |= EffectFlags.PAUSED
   }
 
   resume(): void {
@@ -105,14 +103,7 @@ export class ReactiveEffect<T = any>
   }
 
   notify(): void {
-    const flags = this.flags
-    if (!(flags & EffectFlags.PAUSED)) {
-      this.scheduler()
-    }
-  }
-
-  scheduler(): void {
-    if (this.dirty) {
+    if (!(this.flags & EffectFlags.PAUSED) && this.dirty) {
       this.run()
     }
   }
@@ -197,15 +188,23 @@ export function effect<T = any>(
 
   const e = new ReactiveEffect(fn)
   if (options) {
-    const onStop = options.onStop
-    if (onStop !== undefined) {
+    const { onStop, scheduler } = options
+    if (onStop) {
       options.onStop = undefined
       const stop = e.stop.bind(e)
       e.stop = () => {
         stop()
         onStop()
       }
     }
+    if (scheduler) {
+      options.scheduler = undefined
+      e.notify = () => {
+        if (!(e.flags & EffectFlags.PAUSED)) {
+          scheduler()
+        }
+      }
+    }
     extend(e, options)
   }
   try {

packages/reactivity/src/watch.ts

@@ -214,21 +214,22 @@ export class WatcherEffect extends ReactiveEffect {
     }
   }
 
-  scheduler(): void {
-    if (!this.dirty) {
+  run(initialRun = false): void {
+    const oldValue = this.oldValue
+    const newValue = (this.oldValue = super.run())
+    if (!this.cb) {
       return
     }
-    const newValue = this.run()
-    if (!this.cb) {
+    const { immediate, deep, call } = this.options
+    if (initialRun && !immediate) {
       return
     }
-    const { deep, call } = this.options
     if (
       deep ||
       this.forceTrigger ||
       (this.isMultiSource
-        ? (newValue as any[]).some((v, i) => hasChanged(v, this.oldValue[i]))
-        : hasChanged(newValue, this.oldValue))
+        ? (newValue as any[]).some((v, i) => hasChanged(v, oldValue[i]))
+        : hasChanged(newValue, oldValue))
     ) {
       // cleanup before running cb again
       cleanup(this)
@@ -238,18 +239,17 @@ export class WatcherEffect extends ReactiveEffect {
         const args = [
           newValue,
           // pass undefined as the old value when it's changed for the first time
-          this.oldValue === INITIAL_WATCHER_VALUE
+          oldValue === INITIAL_WATCHER_VALUE
             ? undefined
-            : this.isMultiSource && this.oldValue[0] === INITIAL_WATCHER_VALUE
+            : this.isMultiSource && oldValue[0] === INITIAL_WATCHER_VALUE
               ? []
-              : this.oldValue,
+              : oldValue,
           this.boundCleanup,
         ]
         call
           ? call(this.cb, WatchErrorCodes.WATCH_CALLBACK, args)
           : // @ts-expect-error
             this.cb(...args)
-        this.oldValue = newValue
       } finally {
         activeWatcher = currentWatcher
       }
@@ -283,16 +283,7 @@ export function watch(
 ): WatchHandle {
   const effect = new WatcherEffect(source, cb, options)
 
-  // initial run
-  if (cb) {
-    if (options.immediate) {
-      effect.scheduler()
-    } else {
-      effect.oldValue = effect.run()
-    }
-  } else {
-    effect.run()
-  }
+  effect.run(true)
 
   const stop = effect.stop.bind(effect) as WatchHandle
   stop.pause = effect.pause.bind(effect)

packages/runtime-core/src/apiWatch.ts

@@ -160,7 +160,11 @@ class RenderWatcherEffect extends WatcherEffect {
       this.flags |= EffectFlags.ALLOW_RECURSE
     }
 
-    const job: SchedulerJob = this.scheduler.bind(this)
+    const job: SchedulerJob = () => {
+      if (this.dirty) {
+        this.run()
+      }
+    }
     // important: mark the job as a watcher callback so that scheduler knows
     // it is allowed to self-trigger (#1727)
     if (cb) {
@@ -184,8 +188,8 @@ class RenderWatcherEffect extends WatcherEffect {
         )
       } else if (flush === 'pre') {
         queueJob(this.job, this.instance ? this.instance.uid : undefined, true)
-      } else {
-        this.scheduler()
+      } else if (this.dirty) {
+        this.run()
       }
     }
   }
@@ -253,15 +257,11 @@ function doWatch(
 
   // initial run
   if (cb) {
-    if (options.immediate) {
-      effect.scheduler()
-    } else {
-      effect.oldValue = effect.run()
-    }
+    effect.run(true)
   } else if (flush === 'post') {
     queuePostRenderEffect(effect.job, undefined, instance && instance.suspense)
   } else {
-    effect.scheduler()
+    effect.run(true)
   }
 
   const stop = effect.stop.bind(effect) as WatchHandle

packages/runtime-core/src/renderer.ts

@@ -1358,9 +1358,11 @@ function baseCreateRenderer(
       }
     }
 
-    scheduler() {
-      const job = this.job
-      queueJob(job, job.i!.uid)
+    notify(): void {
+      if (!(this.flags & EffectFlags.PAUSED)) {
+        const job = this.job
+        queueJob(job, job.i!.uid)
+      }
     }
 
     fn() {

packages/runtime-vapor/src/renderEffect.ts

@@ -23,7 +23,11 @@ class RenderEffect extends ReactiveEffect {
       warn('renderEffect called without active EffectScope or Vapor instance.')
     }
 
-    const job: SchedulerJob = super.scheduler.bind(this)
+    const job: SchedulerJob = () => {
+      if (this.dirty) {
+        this.run()
+      }
+    }
     this.updateJob = () => {
       instance!.isUpdating = false
       instance!.u && invokeArrayFns(instance!.u)