feat: watchPostEffect

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

@@ -27,6 +27,7 @@ import {
   shallowRef,
   Ref
 } from '@vue/reactivity'
+import { watchPostEffect } from '../src/apiWatch'
 
 // reference: https://vue-composition-api-rfc.netlify.com/api.html#watch
 
@@ -363,6 +364,32 @@ describe('api: watch', () => {
     expect(result).toBe(true)
   })
 
+  it('watchPostEffect', async () => {
+    const count = ref(0)
+    let result
+    const assertion = jest.fn(count => {
+      result = serializeInner(root) === `${count}`
+    })
+
+    const Comp = {
+      setup() {
+        watchPostEffect(() => {
+          assertion(count.value)
+        })
+        return () => count.value
+      }
+    }
+    const root = nodeOps.createElement('div')
+    render(h(Comp), root)
+    expect(assertion).toHaveBeenCalledTimes(1)
+    expect(result).toBe(true)
+
+    count.value++
+    await nextTick()
+    expect(assertion).toHaveBeenCalledTimes(2)
+    expect(result).toBe(true)
+  })
+
   it('flush timing: sync', async () => {
     const count = ref(0)
     const count2 = ref(0)

packages/runtime-core/src/apiWatch.ts

@@ -3,10 +3,10 @@ import {
   Ref,
   ComputedRef,
   ReactiveEffect,
-  ReactiveEffectOptions,
   isReactive,
   ReactiveFlags,
-  EffectScheduler
+  EffectScheduler,
+  DebuggerOptions
 } from '@vue/reactivity'
 import { SchedulerJob, queuePreFlushCb } from './scheduler'
 import {
@@ -58,10 +58,8 @@ type MapSources<T, Immediate> = {
 
 type InvalidateCbRegistrator = (cb: () => void) => void
 
-export interface WatchOptionsBase {
+export interface WatchOptionsBase extends DebuggerOptions {
   flush?: 'pre' | 'post' | 'sync'
-  onTrack?: ReactiveEffectOptions['onTrack']
-  onTrigger?: ReactiveEffectOptions['onTrigger']
 }
 
 export interface WatchOptions<Immediate = boolean> extends WatchOptionsBase {
@@ -79,6 +77,15 @@ export function watchEffect(
   return doWatch(effect, null, options)
 }
 
+export function watchPostEffect(
+  effect: WatchEffect,
+  options?: DebuggerOptions
+) {
+  return doWatch(effect, null, (__DEV__
+    ? Object.assign(options || {}, { flush: 'post' })
+    : { flush: 'post' }) as WatchOptionsBase)
+}
+
 // initial value for watchers to trigger on undefined initial values
 const INITIAL_WATCHER_VALUE = {}