如图所示，下面是没有绑定key的情况下，当我们给arr末尾新增元素的时候，我们可以看看浏览器的变化。 注意浏览器新增的div有浅色的背景颜色，这代表此元素有变动或者新增，这也是vue或者react操作虚拟dom的好处，会对比前后的结点，有变化的元素才会做出反应，在这种情况下有无key的绑定是无所谓的。
当我们在数组前面插入一条数据的时候，这时我们再来看浏览器的打印变化。此时我们会发现浏览器中的4个div都有浅色的背景，这代表了浏览器对这四个元素都进行了更新，而我们的更新后的数据跟旧数据相比较就只是多了一个元素，但是却导致了4个元素的更新，这明显不是我们想要的结果。
当我们给元素绑定唯一的key时，继续上面的操作。
此刻我们可以看到浏览器只是进行了一次更新，也就是我们新增了数组触发的更新，而其他的元素保持原样。在没有绑定key的情况下浏览器是会根据顺序进行比较。
在没有绑定key的情况下，diff算法会根据顺序进行比较。
在有绑定key的情况下
绑定index的情况下
在实际开发中，循环列表的时候尽量不要去绑定index，应该绑定唯一的key，一般都会有一个id。原因是索引的index是会变化的，也会使得更新多次。