解决v-for数据混乱

绑定 key

为提升性能，v-for 在更新已渲染过的列表时，会采用 “ 就地复用 “ 的策略，但这个策略会在某时造成数据混乱，如：在列表前面新增内容或删除时(若在列表最后新增，则无影响)

解决方法

在渲染列表时，为每个元素添加独一无二的 key，这样，vue 在更新经 v-for 渲染过的列表时，会先判断 key 值是否相同，若相同则复用，若不同则新建

注意：

不能使用各元素的 index 作为 key，因为当新增或删除列表中元素时，各项索引都会变。若设置了 index 作为 key，复用效率会降低