fix vdom patch edge case for static nodes being reused and as insertion reference node (fix #3533)

Author: yyx990803

src/core/instance/render.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import config from '../config'
-import VNode, { emptyVNode } from '../vdom/vnode'
+import VNode, { emptyVNode, cloneVNode, cloneVNodes } from '../vdom/vnode'
 import { normalizeChildren } from '../vdom/helpers'
 import {
   warn, formatComponentName, bind, isObject, toObject,
@@ -36,6 +36,13 @@ export function renderMixin (Vue: Class<Component>) {
       _parentVnode
     } = vm.$options
 
+    if (vm._isMounted) {
+      // clone slot nodes on re-renders
+      for (const key in vm.$slots) {
+        vm.$slots[key] = cloneVNodes(vm.$slots[key])
+      }
+    }
+
     if (staticRenderFns && !vm._staticTrees) {
       vm._staticTrees = []
     }
@@ -90,12 +97,14 @@ export function renderMixin (Vue: Class<Component>) {
   Vue.prototype._m = function renderStatic (
     index: number,
     isInFor?: boolean
-  ): VNode | VNodeChildren {
+  ): VNode | Array<VNode> {
     let tree = this._staticTrees[index]
     // if has already-rendered static tree and not inside v-for,
     // we can reuse the same tree by indentity.
     if (tree && !isInFor) {
-      return tree
+      return Array.isArray(tree)
+        ? cloneVNodes(tree)
+        : cloneVNode(tree)
     }
     // otherwise, render a fresh tree.
     tree = this._staticTrees[index] = this.$options.staticRenderFns[index].call(this._renderProxy)

src/core/vdom/vnode.js

@@ -12,7 +12,7 @@ export default class VNode {
   componentOptions: VNodeComponentOptions | void;
   child: Component | void; // component instance
   parent: VNode | void; // compoennt placeholder node
-  raw: ?boolean; // contains raw HTML
+  raw: ?boolean; // contains raw HTML? (server only)
   isStatic: ?boolean; // hoisted static node
   isRootInsert: boolean; // necessary for enter transition check
   isComment: boolean;
@@ -58,3 +58,31 @@ export const emptyVNode = () => {
   node.isComment = true
   return node
 }
+
+// optimized shallow clone
+// used for static nodes and slot nodes because they may be reused across
+// multiple renders, cloning them avoids errors when DOM manipulations rely
+// on their elm reference.
+export function cloneVNode (vnode: VNode): VNode {
+  const cloned = new VNode(
+    vnode.tag,
+    vnode.data,
+    vnode.children,
+    vnode.text,
+    vnode.elm,
+    vnode.ns,
+    vnode.context,
+    vnode.componentOptions
+  )
+  cloned.isStatic = vnode.isStatic
+  cloned.key = vnode.key
+  return cloned
+}
+
+export function cloneVNodes (vnodes: Array<VNode>): Array<VNode> {
+  const res = new Array(vnodes.length)
+  for (let i = 0; i < vnodes.length; i++) {
+    res[i] = cloneVNode(vnodes[i])
+  }
+  return res
+}

test/unit/modules/vdom/patch/children.spec.js

@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { patch } from 'web/runtime/patch'
 import VNode from 'core/vdom/vnode'
 
@@ -43,7 +42,7 @@ function shuffle (array) {
 const inner = prop('innerHTML')
 const tag = prop('tagName')
 
-describe('children', () => {
+describe('vdom patch: children', () => {
   let vnode0
   beforeEach(() => {
     vnode0 = new VNode('p', { attrs: { id: '1' }}, [createTextVNode('hello world')])
@@ -509,28 +508,4 @@ describe('children', () => {
     elm = patch(vnode2, vnode3)
     expect(elm.textContent).toBe('ABC')
   })
-
-  // exposed by #3406
-  // When a static vnode is inside v-for, it's possible for the same vnode
-  // to be used in multiple places, and its element will be replaced. This
-  // causes patch errors when node ops depend on the vnode's element position.
-  it('should handle static vnodes by key', done => {
-    const vm = new Vue({
-      data: {
-        ok: true
-      },
-      template: `
-        <div>
-          <div v-for="i in 2">
-            <div v-if="ok">a</div><div>b</div><div v-if="!ok">c</div><div>d</div>
-          </div>
-        </div>
-      `
-    }).$mount()
-    expect(vm.$el.textContent).toBe('abdabd')
-    vm.ok = false
-    waitForUpdate(() => {
-      expect(vm.$el.textContent).toBe('bcdbcd')
-    }).then(done)
-  })
 })

test/unit/modules/vdom/patch/edge-cases.spec.js

@@ -0,0 +1,60 @@
+import Vue from 'vue'
+
+describe('vdom patch: edge cases', () => {
+  // exposed by #3406
+  // When a static vnode is inside v-for, it's possible for the same vnode
+  // to be used in multiple places, and its element will be replaced. This
+  // causes patch errors when node ops depend on the vnode's element position.
+  it('should handle static vnodes by key', done => {
+    const vm = new Vue({
+      data: {
+        ok: true
+      },
+      template: `
+        <div>
+          <div v-for="i in 2">
+            <div v-if="ok">a</div><div>b</div><div v-if="!ok">c</div><div>d</div>
+          </div>
+        </div>
+      `
+    }).$mount()
+    expect(vm.$el.textContent).toBe('abdabd')
+    vm.ok = false
+    waitForUpdate(() => {
+      expect(vm.$el.textContent).toBe('bcdbcd')
+    }).then(done)
+  })
+
+  // #3533
+  // a static node (<br>) is reused in createElm, which changes its elm reference
+  // and is inserted into a different parent.
+  // later when patching the next element a DOM insertion uses it as the
+  // reference node, causing a parent mismatch.
+  it('should handle static node edge case when it\'s reused AND used as a reference node for insertion', done => {
+    const vm = new Vue({
+      data: {
+        ok: true
+      },
+      template: `
+        <div>
+          <button @click="ok = !ok">toggle</button>
+          <div class="b" v-if="ok">123</div>
+          <div class="c">
+            <br><p>{{ 1 }}</p>
+          </div>
+          <div class="d">
+            <label>{{ 2 }}</label>
+          </div>
+        </div>
+      `
+    }).$mount()
+
+    expect(vm.$el.querySelector('.c').textContent).toBe('1')
+    expect(vm.$el.querySelector('.d').textContent).toBe('2')
+    vm.ok = false
+    waitForUpdate(() => {
+      expect(vm.$el.querySelector('.c').textContent).toBe('1')
+      expect(vm.$el.querySelector('.d').textContent).toBe('2')
+    }).then(done)
+  })
+})

test/unit/modules/vdom/patch/element.spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { patch } from 'web/runtime/patch'
 import VNode from 'core/vdom/vnode'
 
-describe('element', () => {
+describe('vdom patch: element', () => {
   it('should create an element', () => {
     const vnode = new VNode('p', { attrs: { id: '1' }}, [createTextVNode('hello world')])
     const elm = patch(null, vnode)

test/unit/modules/vdom/patch/hooks.spec.js

@@ -7,7 +7,7 @@ import VNode from 'core/vdom/vnode'
 
 const modules = baseModules.concat(platformModules)
 
-describe('hooks', () => {
+describe('vdom patch: hooks', () => {
   let vnode0
   beforeEach(() => {
     vnode0 = new VNode('p', { attrs: { id: '1' }}, [createTextVNode('hello world')])

test/unit/modules/vdom/patch/hydration.spec.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import { patch } from 'web/runtime/patch'
 import VNode from 'core/vdom/vnode'
 
-describe('hydration', () => {
+describe('vdom patch: hydration', () => {
   let vnode0
   beforeEach(() => {
     spyOn(console, 'warn')