关于vue列表动画的坑点和疑惑--transition-group

例子就是官网的， 把v-for那块的:key的值换掉，动画就执行了
vue实例

new Vue({
            el: '#flip-list-demo',
            data: {
                items: [1,2,3,4,5,6,7,8,9]
            },
            methods: {
                shuffle: function () {
                    this.items = this.items.sort(()=> -1);
                }
            }
        })

这个是模板(css 正常)

<transition-group name="flip-list" tag="ul">
    <li v-for="(item, index) in items" v-bind:key="item ">
        {{ item }}
    </li>
</transition-group>

这样列表动画正常 ，

然而把 :key=“item” 换成 :key=“index” 就不行了
这两种写法有什么区别 ？
如果想要使用列表动画 循环的数组里面必须有id才可以嘛
有大佬来指点一下嘛