v-for未使用key并且子组件中的数据更新不会引起视图变化时，同一位置的元素会完全复用，从而出现父组件向子组件传了数据但是视图却没有改变的问题

vue使用v-for但是没有添加key时导致渲染错误

原因

如果未绑定唯一的key值，使用v–for渲染的组件及其子组件都会使用默认的复用原则，即当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。同时，如果组件中的数据变化并不会引起视图的变化，那么视图会保持不变。
这里的cover组件的父组件使用了v-for但是未定义key

以下是cover组件


cover组件的图片依赖于coverUrl ，而coverUrl只会在组件创建时执行一次，即便父组件传来的props.cover发生了变化但是这并不会引起视图的变化，所以我们点击下一页想渲染新内容时，cover组件对应的视图并不会更新。

案例

可以暗处第二页对应位置上的图片一模一样。

解决方式

1. 给不想复用的组件或者子组件添加唯一的key值。key值不一定要加在使用使用v-for的组件，在其子组件中使用也会生效。
2. 如果没有唯一key值，那么一定要保证组件中的数据变化会引起视图的变化。可以视图直接依赖prop中的数据，或者依赖computed处理的数据。核心是保证组件中的数据变化会引起视图的变化