From 5f988c21693da8827d63bedff811d0f081b14fc8 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 23 Aug 2024 14:14:22 +0800 Subject: [PATCH 1/6] fix: fix guardReactiveProps in v-bind case --- packages/runtime-core/src/vnode.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index 57c0cf8b7d2..2f463a4ad74 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -642,11 +642,25 @@ function _createVNode( ) } +function generateProps(props: Data & VNodeProps) { + const target: Data & VNodeProps = {} + for (const key in props) { + if (isProxy(props[key])) { + target[key] = extend({}, props[key]) + } else { + target[key] = props[key] + } + } + return target +} + export function guardReactiveProps( props: (Data & VNodeProps) | null, ): (Data & VNodeProps) | null { if (!props) return null - return isProxy(props) || isInternalObject(props) ? extend({}, props) : props + return isProxy(props) || isInternalObject(props) + ? extend({}, generateProps(props)) + : props } export function cloneVNode( From ad3a8bff37d13efe243e2d5fc6806465336c9001 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 23 Aug 2024 14:51:45 +0800 Subject: [PATCH 2/6] chore: update test --- .../runtime-dom/__tests__/patchProps.spec.ts | 45 ++++++++++++++++++- 1 file changed, 44 insertions(+), 1 deletion(-) diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts index 952508f8f91..327e4cee34f 100644 --- a/packages/runtime-dom/__tests__/patchProps.spec.ts +++ b/packages/runtime-dom/__tests__/patchProps.spec.ts @@ -1,5 +1,15 @@ import { patchProp } from '../src/patchProp' -import { h, nextTick, ref, render } from '../src' +import { + createElementBlock, + guardReactiveProps, + h, + nextTick, + normalizeProps, + reactive, + ref, + render, + toRefs, +} from '../src' describe('runtime-dom: props patching', () => { test('basic', () => { @@ -351,4 +361,37 @@ describe('runtime-dom: props patching', () => { expect(el.translate).toBeFalsy() expect(el.getAttribute('translate')).toBe('no') }) + + // #11691 + test('should update the color style of the element from red to yellow after a timeout', async () => { + const state = reactive({ + obj: { + style: { + color: 'red', + }, + }, + }) + const App = { + setup() { + const { obj } = toRefs(state) + setTimeout(async () => { + state.obj.style.color = 'yellow' + await nextTick() + expect(el.style.color).toBe('yellow') + }) + return () => { + return createElementBlock( + 'div', + normalizeProps(guardReactiveProps(obj.value)), + 'msg', + 17, + ) + } + }, + } + const root = document.createElement('div') + render(h(App), root) + const el = root.children[0] as HTMLSelectElement + expect(el.style.color).toBe('red') + }) }) From 48ccf40f2ff2430bd11071e758bc497ca4e43e1b Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 23 Aug 2024 15:01:46 +0800 Subject: [PATCH 3/6] chore: update --- packages/runtime-dom/__tests__/patchProps.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts index 327e4cee34f..da4267c0101 100644 --- a/packages/runtime-dom/__tests__/patchProps.spec.ts +++ b/packages/runtime-dom/__tests__/patchProps.spec.ts @@ -380,6 +380,7 @@ describe('runtime-dom: props patching', () => { expect(el.style.color).toBe('yellow') }) return () => { + //
msg
return createElementBlock( 'div', normalizeProps(guardReactiveProps(obj.value)), From 6185f95c99e5591f6207b11a2eb2d5f8ac9c7eb4 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 23 Aug 2024 17:34:57 +0800 Subject: [PATCH 4/6] chore: updae test --- packages/runtime-dom/__tests__/patchProps.spec.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/runtime-dom/__tests__/patchProps.spec.ts b/packages/runtime-dom/__tests__/patchProps.spec.ts index da4267c0101..de001e6be1b 100644 --- a/packages/runtime-dom/__tests__/patchProps.spec.ts +++ b/packages/runtime-dom/__tests__/patchProps.spec.ts @@ -363,7 +363,7 @@ describe('runtime-dom: props patching', () => { }) // #11691 - test('should update the color style of the element from red to yellow after a timeout', async () => { + test('should update the color style of the element from red to yellow', async () => { const state = reactive({ obj: { style: { @@ -374,11 +374,6 @@ describe('runtime-dom: props patching', () => { const App = { setup() { const { obj } = toRefs(state) - setTimeout(async () => { - state.obj.style.color = 'yellow' - await nextTick() - expect(el.style.color).toBe('yellow') - }) return () => { //
msg
return createElementBlock( @@ -394,5 +389,9 @@ describe('runtime-dom: props patching', () => { render(h(App), root) const el = root.children[0] as HTMLSelectElement expect(el.style.color).toBe('red') + + state.obj.style.color = 'yellow' + await nextTick() + expect(el.style.color).toBe('yellow') }) }) From d71753d4ba1ab46c1c8789c43e1e8af6f80221f6 Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 23 Aug 2024 17:42:35 +0800 Subject: [PATCH 5/6] chore: update --- packages/runtime-core/src/vnode.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index 2f463a4ad74..d8007615e08 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -645,8 +645,8 @@ function _createVNode( function generateProps(props: Data & VNodeProps) { const target: Data & VNodeProps = {} for (const key in props) { - if (isProxy(props[key])) { - target[key] = extend({}, props[key]) + if (isObject(props[key])) { + target[key] = generateProps(props[key]) } else { target[key] = props[key] } From e320f3034730a75afd2aaa10d7517fd00dae218f Mon Sep 17 00:00:00 2001 From: linzhe141 <1572213544@qq.com> Date: Fri, 23 Aug 2024 17:43:19 +0800 Subject: [PATCH 6/6] chore: update --- packages/runtime-core/src/vnode.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts index d8007615e08..9f693e4d800 100644 --- a/packages/runtime-core/src/vnode.ts +++ b/packages/runtime-core/src/vnode.ts @@ -659,7 +659,7 @@ export function guardReactiveProps( ): (Data & VNodeProps) | null { if (!props) return null return isProxy(props) || isInternalObject(props) - ? extend({}, generateProps(props)) + ? generateProps(props) : props }