From 50382e6617cbf6f247dbb5967e079dd4f19badc6 Mon Sep 17 00:00:00 2001 From: wjh123 <894275157@qq.com> Date: Wed, 20 Jan 2021 15:59:20 +0800 Subject: [PATCH 1/5] fix(runtime-core): watching multiple sources: computed --- .../runtime-core/__tests__/apiWatch.spec.ts | 16 ++++++++++++++++ packages/runtime-core/src/apiWatch.ts | 17 ++++++++++++++++- 2 files changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts index 1836b6e9392..a17b9f25005 100644 --- a/packages/runtime-core/__tests__/apiWatch.spec.ts +++ b/packages/runtime-core/__tests__/apiWatch.spec.ts @@ -30,6 +30,22 @@ import { // reference: https://vue-composition-api-rfc.netlify.com/api.html#watch describe('api: watch', () => { + it('watching multiple sources: computed', async () => { + let count = 0 + const value = ref('1') + const plus = computed(() => !!value.value) + watch([plus], () => { + count++ + }) + watch(plus, () => { + count++ + }) + value.value = '2' + await nextTick() + expect(plus.value).toBe(true) + expect(count).toBe(0) + }) + it('effect', async () => { const state = reactive({ count: 0 }) let dummy diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index f0ff31fcfdd..ce1fc16f96f 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -248,7 +248,22 @@ function doWatch( if (cb) { // watch(source, cb) const newValue = runner() - if (deep || forceTrigger || hasChanged(newValue, oldValue)) { + let change: boolean = false + if (isArray(newValue) && isArray(oldValue)) { + for (let i = 0; i < newValue.length && i < oldValue.length; i++) { + if (hasChanged(newValue[i], oldValue[i])) { + change = true + break + } + if (typeof newValue[i] === 'object') { + forceTrigger = true + break + } + } + } else { + change = hasChanged(newValue, oldValue) + } + if (deep || forceTrigger || change) { // cleanup before running cb again if (cleanup) { cleanup() From 2f77ba2d213f46ff8d1a037f203e9dbb53557af0 Mon Sep 17 00:00:00 2001 From: wjh123 <894275157@qq.com> Date: Thu, 21 Jan 2021 09:45:41 +0800 Subject: [PATCH 2/5] fix(runtime-core): watching sources: ref --- packages/runtime-core/__tests__/apiWatch.spec.ts | 11 +++++++++++ packages/runtime-core/src/apiWatch.ts | 6 +++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts index a17b9f25005..6f211f62d60 100644 --- a/packages/runtime-core/__tests__/apiWatch.spec.ts +++ b/packages/runtime-core/__tests__/apiWatch.spec.ts @@ -30,6 +30,17 @@ import { // reference: https://vue-composition-api-rfc.netlify.com/api.html#watch describe('api: watch', () => { + it('watching sources: ref', async () => { + const foo = ref([1]) + const spy = jest.fn() + watch(foo, () => { + spy() + }) + foo.value = foo.value.slice() + await nextTick() + expect(spy).toBeCalledTimes(1) + }) + it('watching multiple sources: computed', async () => { let count = 0 const value = ref('1') diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index ce1fc16f96f..d4334937778 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -167,6 +167,7 @@ function doWatch( let getter: () => any let forceTrigger = false + let isSourceArray: boolean = false if (isRef(source)) { getter = () => (source as Ref).value forceTrigger = !!(source as Ref)._shallow @@ -174,6 +175,7 @@ function doWatch( getter = () => source deep = true } else if (isArray(source)) { + isSourceArray = true getter = () => source.map(s => { if (isRef(s)) { @@ -249,7 +251,9 @@ function doWatch( // watch(source, cb) const newValue = runner() let change: boolean = false - if (isArray(newValue) && isArray(oldValue)) { + // isSourceArray + // if (isArray(newValue) && isArray(oldValue)) { + if (isSourceArray && isArray(newValue) && isArray(oldValue)) { for (let i = 0; i < newValue.length && i < oldValue.length; i++) { if (hasChanged(newValue[i], oldValue[i])) { change = true From e87fddbdabf19a84a64f8f97eb2c28a2ef5de10b Mon Sep 17 00:00:00 2001 From: wjh123 <894275157@qq.com> Date: Thu, 21 Jan 2021 18:00:52 +0800 Subject: [PATCH 3/5] fix(runtime-core): remove code annotation --- packages/runtime-core/src/apiWatch.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index d4334937778..64add019fd9 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -251,8 +251,7 @@ function doWatch( // watch(source, cb) const newValue = runner() let change: boolean = false - // isSourceArray - // if (isArray(newValue) && isArray(oldValue)) { + if (isSourceArray && isArray(newValue) && isArray(oldValue)) { for (let i = 0; i < newValue.length && i < oldValue.length; i++) { if (hasChanged(newValue[i], oldValue[i])) { From 47d176a3f4a3aa7dfc5cdc844cf02ce0f2ab8e1f Mon Sep 17 00:00:00 2001 From: wjh123 <894275157@qq.com> Date: Tue, 2 Feb 2021 12:46:15 +0800 Subject: [PATCH 4/5] fix(runtime-core): optmized --- packages/runtime-core/__tests__/apiWatch.spec.ts | 3 --- packages/runtime-core/src/apiWatch.ts | 5 +---- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts index 6f211f62d60..882ad9c487e 100644 --- a/packages/runtime-core/__tests__/apiWatch.spec.ts +++ b/packages/runtime-core/__tests__/apiWatch.spec.ts @@ -48,9 +48,6 @@ describe('api: watch', () => { watch([plus], () => { count++ }) - watch(plus, () => { - count++ - }) value.value = '2' await nextTick() expect(plus.value).toBe(true) diff --git a/packages/runtime-core/src/apiWatch.ts b/packages/runtime-core/src/apiWatch.ts index 64add019fd9..28e24f959a5 100644 --- a/packages/runtime-core/src/apiWatch.ts +++ b/packages/runtime-core/src/apiWatch.ts @@ -181,6 +181,7 @@ function doWatch( if (isRef(s)) { return s.value } else if (isReactive(s)) { + deep = true return traverse(s) } else if (isFunction(s)) { return callWithErrorHandling(s, instance, ErrorCodes.WATCH_GETTER) @@ -258,10 +259,6 @@ function doWatch( change = true break } - if (typeof newValue[i] === 'object') { - forceTrigger = true - break - } } } else { change = hasChanged(newValue, oldValue) From adbd014b75f5a9e6e39150a053212b8593f7d44b Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 7 May 2021 18:00:01 -0400 Subject: [PATCH 5/5] Update apiWatch.spec.ts --- .../runtime-core/__tests__/apiWatch.spec.ts | 48 +++++++++---------- 1 file changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/runtime-core/__tests__/apiWatch.spec.ts b/packages/runtime-core/__tests__/apiWatch.spec.ts index 79dfca397fc..aed7d65b6a5 100644 --- a/packages/runtime-core/__tests__/apiWatch.spec.ts +++ b/packages/runtime-core/__tests__/apiWatch.spec.ts @@ -31,30 +31,6 @@ import { // reference: https://vue-composition-api-rfc.netlify.com/api.html#watch describe('api: watch', () => { - it('watching sources: ref', async () => { - const foo = ref([1]) - const spy = jest.fn() - watch(foo, () => { - spy() - }) - foo.value = foo.value.slice() - await nextTick() - expect(spy).toBeCalledTimes(1) - }) - - it('watching multiple sources: computed', async () => { - let count = 0 - const value = ref('1') - const plus = computed(() => !!value.value) - watch([plus], () => { - count++ - }) - value.value = '2' - await nextTick() - expect(plus.value).toBe(true) - expect(count).toBe(0) - }) - it('effect', async () => { const state = reactive({ count: 0 }) let dummy @@ -968,4 +944,28 @@ describe('api: watch', () => { await nextTick() expect(spy).toHaveBeenCalledTimes(2) }) + + it('watching sources: ref', async () => { + const foo = ref([1]) + const spy = jest.fn() + watch(foo, () => { + spy() + }) + foo.value = foo.value.slice() + await nextTick() + expect(spy).toBeCalledTimes(1) + }) + + it('watching multiple sources: computed', async () => { + let count = 0 + const value = ref('1') + const plus = computed(() => !!value.value) + watch([plus], () => { + count++ + }) + value.value = '2' + await nextTick() + expect(plus.value).toBe(true) + expect(count).toBe(0) + }) })