refactor(runtime-core): replace watch with watchEffect for synchronous and post flush handling

Author: johnsoncodehk

packages/runtime-core/__tests__/apiWatch.spec.ts

@@ -515,21 +515,19 @@ describe('api: watch', () => {
       source = ref(0)
       copyist = ref(0)
       // sync flush
-      watch(
+      watchEffect(
         () => {
           const current = (copyist.value = source.value)
           onWatcherCleanup(() => calls.push(`sync ${current}`))
         },
-        null,
         { flush: 'sync' },
       )
       // post flush
-      watch(
+      watchEffect(
         () => {
           const current = copyist.value
           onWatcherCleanup(() => calls.push(`post ${current}`))
         },
-        null,
         { flush: 'post' },
       )
     })

packages/runtime-core/src/apiWatch.ts

@@ -88,7 +88,7 @@ export type MultiWatchSources = (WatchSource<unknown> | object)[]
 // overload: single source + cb
 export function watch<T, Immediate extends Readonly<boolean> = false>(
   source: WatchSource<T>,
-  cb: WatchCallback<T, MaybeUndefined<T, Immediate>> | null,
+  cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
   options?: WatchOptions<Immediate>,
 ): WatchHandle
 
@@ -98,11 +98,9 @@ export function watch<
   Immediate extends Readonly<boolean> = false,
 >(
   sources: readonly [...T] | T,
-  cb:
-    | ([T] extends [ReactiveMarker]
-        ? WatchCallback<T, MaybeUndefined<T, Immediate>>
-        : WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>)
-    | null,
+  cb: [T] extends [ReactiveMarker]
+    ? WatchCallback<T, MaybeUndefined<T, Immediate>>
+    : WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
   options?: WatchOptions<Immediate>,
 ): WatchHandle
 
@@ -112,7 +110,7 @@ export function watch<
   Immediate extends Readonly<boolean> = false,
 >(
   sources: [...T],
-  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>> | null,
+  cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>,
   options?: WatchOptions<Immediate>,
 ): WatchHandle
 
@@ -122,17 +120,17 @@ export function watch<
   Immediate extends Readonly<boolean> = false,
 >(
   source: T,
-  cb: WatchCallback<T, MaybeUndefined<T, Immediate>> | null,
+  cb: WatchCallback<T, MaybeUndefined<T, Immediate>>,
   options?: WatchOptions<Immediate>,
 ): WatchHandle
 
 // implementation
 export function watch<T = any, Immediate extends Readonly<boolean> = false>(
   source: T | WatchSource<T>,
-  cb: WatchCallback | null,
+  cb: WatchCallback,
   options?: WatchOptions<Immediate>,
 ): WatchHandle {
-  if (__DEV__ && cb && !isFunction(cb)) {
+  if (__DEV__ && !isFunction(cb)) {
     warn(
       `\`watch(fn, options?)\` signature has been moved to a separate API. ` +
         `Use \`watchEffect(fn, options?)\` instead. \`watch\` now only ` +
@@ -146,20 +144,14 @@ class RenderWatcherEffect extends WatcherEffect {
   job: SchedulerJob
 
   constructor(
-    public instance: GenericComponentInstance | null,
+    instance: GenericComponentInstance | null,
     source: WatchSource | WatchSource[] | WatchEffect | object,
     cb: WatchCallback | null,
     options: BaseWatchOptions,
-    public flush: 'pre' | 'post' | 'sync',
+    private flush: 'pre' | 'post' | 'sync',
   ) {
     super(source, cb, options)
 
-    // important: mark the job as a watcher callback so that scheduler knows
-    // it is allowed to self-trigger (#1727)
-    if (cb) {
-      this.flags |= EffectFlags.ALLOW_RECURSE
-    }
-
     const job: SchedulerJob = () => {
       if (this.dirty) {
         this.run()
@@ -168,10 +160,11 @@ class RenderWatcherEffect extends WatcherEffect {
     // important: mark the job as a watcher callback so that scheduler knows
     // it is allowed to self-trigger (#1727)
     if (cb) {
+      this.flags |= EffectFlags.ALLOW_RECURSE
       job.flags! |= SchedulerJobFlags.ALLOW_RECURSE
     }
-    if (flush === 'pre' && instance) {
-      ;(job as SchedulerJob).i = instance
+    if (instance) {
+      job.i = instance
     }
     this.job = job
   }
@@ -181,13 +174,11 @@ class RenderWatcherEffect extends WatcherEffect {
     if (!(flags & EffectFlags.PAUSED)) {
       const flush = this.flush
       if (flush === 'post') {
-        queuePostRenderEffect(
-          this.job,
-          undefined,
-          this.instance && this.instance.suspense,
-        )
+        const job = this.job
+        queuePostRenderEffect(job, undefined, job.i ? job.i.suspense : null)
       } else if (flush === 'pre') {
-        queueJob(this.job, this.instance ? this.instance.uid : undefined, true)
+        const job = this.job
+        queueJob(job, job.i ? job.i.uid : undefined, true)
       } else if (this.dirty) {
         this.run()
       }