Vue中的key值

列表渲染中key值的作用

PS：

•v-for的时候一定要设置key属性，不然会产生警告。

• 如果我们要利用key属性的优点，必须保证同一父元素的所有子元素有不同的key属性。如果key值重复，会报错。

当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

当v-for里面没有设置key属性时

var arr=[1,2,3,4]
然后在数组头部加一个0
渲染更新的步骤是这样的：
1->0,2->1,....然后到最后位置添加4

当v-for里面有设置了key属性时

<div v-for="(num, index) in numbers" :key="index">
  {{num}}
</div>
var arr=[1,2,3,4]
然后在数组头部加一个0
渲染更新的步骤是这样的：
直接在头部插入0，然后其他元素复用。

不能使用index作为key值

!!!敲重点：上面的写法其实是有问题的，因为不能使用index值做key值。
因为只有key值不改变，才能复用，而插入元素，会改变数组下标（index），也改变了key，依然会重新渲染。
开发过程中, 因为我们的数据绝大部分都是从后台获取来的. 数据库中每一条数据都会一个 id . 作为唯一标识. 而这个 id 也是我们最常使用作为 key 值来源。

【关于key值与渲染之间的关系，就需要了解diff 算法等知识了】