diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts index 1836b6e9392..30248072a9b 100644 --- a/packages/runtime-core/__tests__/apiWatch.spec.ts +++ b/packages/runtime-core/__tests__/apiWatch.spec.ts @@ -15,7 +15,8 @@ import { nodeOps, serializeInner, TestElement, - h + h, + createApp } from '@vue/runtime-test' import { ITERATE_KEY, @@ -857,4 +858,23 @@ describe('api: watch', () => { expect(instance!.effects![0].active).toBe(false) }) + + test('this.$watch should pass `this.proxy` to watch source as the first argument ', () => { + let instance: any + const source = jest.fn() + + const Comp = defineComponent({ + render() {}, + created(this: any) { + instance = this + this.$watch(source, function() {}) + } + }) + + const root = nodeOps.createElement('div') + createApp(Comp).mount(root) + + expect(instance).toBeDefined() + expect(source).toHaveBeenCalledWith(instance) + }) }) diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index f0ff31fcfdd..94a0197ecc0 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -181,7 +181,9 @@ function doWatch( } else if (isReactive(s)) { return traverse(s) } else if (isFunction(s)) { - return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER) + return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER, [ + instance && (instance.proxy as any) + ]) } else { __DEV__ && warnInvalidSource(s) } @@ -190,7 +192,9 @@ function doWatch( if (cb) { // getter with cb getter = () => - callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER) + callWithErrorHandling(source, instance, ErrorCodes.WATCH_GETTER, [ + instance && (instance.proxy as any) + ]) } else { // no cb -> simple effect getter = () => {