feat(watch): support dot-delimited path in watch option

vuejs · Sep 18, 2020 · 1c9a0b3 · 1c9a0b3
1 parent 5bfcad1
commit 1c9a0b3
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 4 deletions.
diff --git a/packages/runtime-core/__tests__/apiOptions.spec.ts b/packages/runtime-core/__tests__/apiOptions.spec.ts
@@ -113,6 +113,7 @@ describe('api: options', () => {
  const spyB = jest.fn(returnThis)
  const spyC = jest.fn(returnThis)
  const spyD = jest.fn(returnThis)
+ const spyE = jest.fn(returnThis)
 
  let ctx: any
  const Comp = {
@@ -123,7 +124,10 @@ describe('api: options', () => {
  baz: {
  qux: 3
  },
- qux: 4
+ qux: 4,
+ dot: {
+ path: 5
+ }
  }
  },
  watch: {
@@ -137,7 +141,8 @@ describe('api: options', () => {
  },
  qux: {
  handler: 'onQuxChange'
- }
+ },
+ 'dot.path': spyE
  },
  methods: {
  onFooChange: spyA,
@@ -175,6 +180,11 @@ describe('api: options', () => {
  await nextTick()
  expect(spyD).toHaveBeenCalledTimes(1)
  assertCall(spyD, 0, [5, 4])
+
+ ctx.dot.path++
+ await nextTick()
+ expect(spyE).toHaveBeenCalledTimes(1)
+ assertCall(spyE, 0, [6, 5])
  })
 
  test('watch array', async () => {

diff --git a/packages/runtime-core/src/componentOptions.ts b/packages/runtime-core/src/componentOptions.ts
@@ -816,7 +816,9 @@ function createWatcher(
  publicThis: ComponentPublicInstance,
  key: string
 ) {
- const getter = () => (publicThis as any)[key]
+ const getter = key.includes('.')
+ ? createPathGetter(publicThis, key)
+ : () => (publicThis as any)[key]
  if (isString(raw)) {
  const handler = ctx[raw]
  if (isFunction(handler)) {
@@ -840,7 +842,18 @@ function createWatcher(
  }
  }
  } else if (__DEV__) {
- warn(`Invalid watch option: "${key}"`)
+ warn(`Invalid watch option: "${key}"`, raw)
+ }
+}
+
+function createPathGetter(ctx: any, path: string) {
+ const segments = path.split('.')
+ return () => {
+ let cur = ctx
+ for (let i = 0; i < segments.length && cur; i++) {
+ cur = cur[segments[i]]
+ }
+ return cur
  }
 }