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 = {}