From 517c2b8bdb9ffa53717c10d604ff6db84d50d4f2 Mon Sep 17 00:00:00 2001 From: zhangzhonghe <38434641+zhangzhonghe@users.noreply.github.com> Date: Sat, 15 Aug 2020 05:26:32 +0800 Subject: [PATCH] fix(teleport): always inherit root DOM nodes on patch (#1836) fix #1813 --- .../runtime-core/src/components/Teleport.ts | 5 ++- packages/vue/__tests__/index.spec.ts | 39 +++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts index 8c588df128b..ca885c3d920 100644 --- a/packages/runtime-core/src/components/Teleport.ts +++ b/packages/runtime-core/src/components/Teleport.ts @@ -139,7 +139,10 @@ export const TeleportImpl = { parentSuspense, isSVG ) - if (n2.patchFlag > 0 && n2.shapeFlag & ShapeFlags.ARRAY_CHILDREN) { + // even in block tree mode we need to make sure all root-level nodes + // in the teleport inherit previous DOM references so that they can + // be moved in future patches. + if (n2.shapeFlag & ShapeFlags.ARRAY_CHILDREN) { const oldChildren = n1.children as VNode[] const children = n2.children as VNode[] for (let i = 0; i < children.length; i++) { diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts index 974fffc0442..7339a0804fa 100644 --- a/packages/vue/__tests__/index.spec.ts +++ b/packages/vue/__tests__/index.spec.ts @@ -208,4 +208,43 @@ describe('compiler + runtime integration', () => { ).toHaveBeenWarned() document.querySelector = origin }) + + // #1813 + it('should not report an error when "0" as patchFlag value', async () => { + const container = document.createElement('div') + const target = document.createElement('div') + const count = ref(0) + const origin = document.querySelector + document.querySelector = jest.fn().mockReturnValue(target) + + const App = { + template: ` + +
+
{{ count }}
+
+
+ `, + data() { + return { + count + } + } + } + createApp(App).mount(container) + expect(container.innerHTML).toBe(``) + expect(target.innerHTML).toBe(`
0
`) + + count.value++ + await nextTick() + expect(container.innerHTML).toBe(``) + expect(target.innerHTML).toBe(`
1
`) + + count.value++ + await nextTick() + expect(container.innerHTML).toBe(``) + expect(target.innerHTML).toBe(``) + + document.querySelector = origin + }) })