polish: warn sequential index on <transition-group> (#8748)

Author: HcySunYang

src/compiler/parser/index.js

@@ -331,8 +331,20 @@ export function processElement (element: ASTElement, options: CompilerOptions) {
 function processKey (el) {
   const exp = getBindingAttr(el, 'key')
   if (exp) {
-    if (process.env.NODE_ENV !== 'production' && el.tag === 'template') {
-      warn(`<template> cannot be keyed. Place the key on real elements instead.`)
+    if (process.env.NODE_ENV !== 'production') {
+      if (el.tag === 'template') {
+        warn(`<template> cannot be keyed. Place the key on real elements instead.`)
+      }
+      if (el.for) {
+        const iterator = el.iterator2 || el.iterator1
+        const parent = el.parent
+        if (iterator && iterator === exp && parent && parent.tag === 'transition-group') {
+          warn(
+            `Do not use v-for index as key on <transtion-group> children, ` +
+            `this is the same as not using keys.`
+          )
+        }
+      }
     }
     el.key = exp
   }

test/unit/modules/compiler/parser.spec.js

@@ -242,6 +242,17 @@ describe('parser', () => {
     expect('<template> cannot be keyed').toHaveBeenWarned()
   })
 
+  it('warn the child of the <transition-group> component has sequential index', () => {
+    parse(`
+      <div>
+        <transition-group>
+          <i v-for="(o, i) of arr" :key="i"></i>
+        </transition-group>
+      </div>
+    `, baseOptions)
+    expect('Do not use v-for index as key on <transtion-group> children').toHaveBeenWarned()
+  })
+
   it('v-pre directive', () => {
     const ast = parse('<div v-pre id="message1"><p>{{msg}}</p></div>', baseOptions)
     expect(ast.pre).toBe(true)