From 42ace9577da49477ff189950a83d6eead73d0efe Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 9 Jul 2021 21:47:15 -0400 Subject: [PATCH] feat: watchPostEffect --- .../runtime-core/__tests__/apiWatch.spec.ts | 27 +++++++++++++++++++ packages/runtime-core/src/apiWatch.ts | 17 ++++++++---- 2 files changed, 39 insertions(+), 5 deletions(-) diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts index 9611b761f03..87644742cca 100644 --- a/packages/runtime-core/__tests__/apiWatch.spec.ts +++ b/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) diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index eb3a4503ceb..2c2d8964754 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/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 = { 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 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 = {}