chore: trigger side effects after scheduled for watch() and render()

Author: johnsoncodehk

packages/runtime-core/src/apiWatch.ts

@@ -6,7 +6,6 @@ import {
   ReactiveEffect,
   isReactive,
   ReactiveFlags,
-  EffectScheduler,
   DebuggerOptions,
   getCurrentScope
 } from '@vue/reactivity'
@@ -364,19 +363,22 @@ function doWatch(
   // it is allowed to self-trigger (#1727)
   job.allowRecurse = !!cb
 
-  let scheduler: EffectScheduler
+  let schedulerJob: SchedulerJob
   if (flush === 'sync') {
-    scheduler = onScheduled => onScheduled(job as any) // the scheduler function gets called directly
+    schedulerJob = job // the scheduler function gets called directly
   } else if (flush === 'post') {
-    scheduler = () => queuePostRenderEffect(job, instance && instance.suspense)
+    schedulerJob = () =>
+      queuePostRenderEffect(job, instance && instance.suspense)
   } else {
     // default: 'pre'
     job.pre = true
     if (instance) job.id = instance.uid
-    scheduler = () => queueJob(job)
+    schedulerJob = () => queueJob(job)
   }
 
-  const effect = new ReactiveEffect(getter, scheduler)
+  const effect = new ReactiveEffect(getter, onScheduled => {
+    onScheduled(schedulerJob as any)
+  })
 
   const unwatch = () => {
     effect.stop()

packages/runtime-core/src/renderer.ts

@@ -1545,9 +1545,10 @@ function baseCreateRenderer(
     }
 
     // create reactive effect for rendering
+    const schedulerJob = () => queueJob(update)
     const effect = (instance.effect = new ReactiveEffect(
       componentUpdateFn,
-      () => queueJob(update),
+      onScheduled => onScheduled(schedulerJob),
       instance.scope // track it in component's effect scope
     ))