fix(patch): warn error when vnode with duplicate key

Author: gebilaoxiong

src/core/vdom/patch.js

@@ -263,6 +263,9 @@ export function createPatchFunction (backend) {
 
   function createChildren (vnode, children, insertedVnodeQueue) {
     if (Array.isArray(children)) {
+      if (process.env.NODE_ENV !== 'production') {
+        checkChildren(children)
+      }
       for (let i = 0; i < children.length; ++i) {
         createElm(children[i], insertedVnodeQueue, vnode.elm, null, true)
       }
@@ -394,6 +397,10 @@ export function createPatchFunction (backend) {
     // during leaving transitions
     const canMove = !removeOnly
 
+    if (process.env.NODE_ENV !== 'production') {
+      checkChildren(newCh)
+    }
+
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
       if (isUndef(oldStartVnode)) {
         oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
@@ -426,13 +433,6 @@ export function createPatchFunction (backend) {
           createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
         } else {
           vnodeToMove = oldCh[idxInOld]
-          /* istanbul ignore if */
-          if (process.env.NODE_ENV !== 'production' && !vnodeToMove) {
-            warn(
-              'It seems there are duplicate keys that is causing an update error. ' +
-              'Make sure each v-for item has a unique key.'
-            )
-          }
           if (sameVnode(vnodeToMove, newStartVnode)) {
             patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
             oldCh[idxInOld] = undefined
@@ -453,6 +453,23 @@ export function createPatchFunction (backend) {
     }
   }
 
+  function checkChildren (children) {
+    const cache = {}
+
+    for (let i = 0; i < children.length; i++) {
+      const vnode = children[i]
+      const key = vnode.key
+
+      if (key != null) {
+        if (cache[key]) {
+          warn(`The duplicate keys: '${key}' that is causing an update error.`)
+        } else {
+          cache[key] = true
+        }
+      }
+    }
+  }
+
   function findIdxInOld (node, oldCh, start, end) {
     for (let i = start; i < end; i++) {
       const c = oldCh[i]

test/unit/features/component/component.spec.js

@@ -166,7 +166,7 @@ describe('Component', () => {
     const vm = new Vue({
       template:
         '<div>' +
-          '<component v-for="c in comps" :key="c.type" :is="c.type"></component>' +
+          '<component v-for="(c, i) in comps" :key="i" :is="c.type"></component>' +
         '</div>',
       data: {
         comps: [{ type: 'one' }, { type: 'two' }]

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

@@ -507,4 +507,27 @@ describe('vdom patch: children', () => {
 
     expect(postPatch).toBe(original)
   })
+
+  it('should warn with duplicate keys: createChildren', () => {
+    function makeNode (key) {
+      return new VNode('div', { key: key })
+    }
+
+    const vnode = new VNode('p', {}, ['b', 'a', 'c', 'b'].map(makeNode))
+    patch(null, vnode)
+    expect('The duplicate keys: \'b\' that is causing an update error.').toHaveBeenWarned()
+  })
+
+  it('should warn with duplicate keys: updateChildren', () => {
+    function makeNode (key) {
+      return new VNode('div', { key: key })
+    }
+
+    const vnode2 = new VNode('p', {}, ['b', 'a', 'c', 'b'].map(makeNode))
+    const vnode3 = new VNode('p', {}, ['b', 'x', 'd', 'b'].map(makeNode))
+    patch(vnode0, vnode2)
+    expect('The duplicate keys: \'b\' that is causing an update error.').toHaveBeenWarned()
+    patch(vnode2, vnode3)
+    expect('The duplicate keys: \'b\' that is causing an update error.').toHaveBeenWarned()
+  })
 })