From: zhangzhonghe <38434641+zhangzhonghe@users.noreply.github.com>
Date: Fri, 14 Aug 2020 21:26:32 +0000 (+0800)
Subject: fix(teleport): always inherit root DOM nodes on patch (#1836)
X-Git-Tag: v3.0.0-rc.6~35
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=517c2b8bdb9ffa53717c10d604ff6db84d50d4f2;p=thirdparty%2Fvuejs%2Fcore.git

fix(teleport): always inherit root DOM nodes on patch (#1836)

fix #1813
---

diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 8c588df128..ca885c3d92 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 974fffc044..7339a0804f 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: `
+      <teleport v-if="count < 2" to="#target">
+        <div>
+          <div>{{ count }}</div>
+        </div>
+      </teleport>
+      `,
+      data() {
+        return {
+          count
+        }
+      }
+    }
+    createApp(App).mount(container)
+    expect(container.innerHTML).toBe(`<!--teleport start--><!--teleport end-->`)
+    expect(target.innerHTML).toBe(`<div><div>0</div></div>`)
+
+    count.value++
+    await nextTick()
+    expect(container.innerHTML).toBe(`<!--teleport start--><!--teleport end-->`)
+    expect(target.innerHTML).toBe(`<div><div>1</div></div>`)
+
+    count.value++
+    await nextTick()
+    expect(container.innerHTML).toBe(`<!--v-if-->`)
+    expect(target.innerHTML).toBe(``)
+
+    document.querySelector = origin
+  })
 })