当用index作为:key的时候
前后两次生成虚拟DOM时候会对具有相同key的DOM节点(也比较节点当中的子节点)进行比较,
如果两次虚拟DOM完全相同则会直接从页面已经生成好的真实DOM上直接copy过来
如果子节点不同则会把不同的子节点按照新的虚拟DOM重新生成真实DOM,相同的那部分子节点还是会从页面的真实DOM中copy过来,
正是因为如此所以上图在进行虚拟DOM比较时候只发现了文本子节点不一样而没有发现input子节点的不同(这是因为上图对input的修改只停留在真实DOM上),所以VUE就认为input子节点并没有改变从而直接从真实DOM中copy导致如图所示的错位。
总结
在使用v-for时候对应的key尽量使用后端给予的唯一标识符(例如id,身份证号,电话号等等)