key的作用与原理

Vue中key属性的作用
在列表渲染时使用key属性
使用key属性强制替换元素
在列表渲染时使用key属性
相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候，如果不使用key属性，Vue会产生警告，那么在这个时候key属性的作用是什么呢？

官方文档中说：

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

假设Vue实例的data属性中有一个叫numbers的变量，它的值是[1, 2, 3, 7, 8, 9]：

<div v-for="num in numbers">
  { {num}}
</div>

这种情况下应当是渲染了6个<div>元素，其中的内容分别对应numbers中6个数字，此时如果numbers变成了[0, 1, 2, 3, 7, 8, 9]，即在数组头部插入了一个数字0，在没有key属性的情况下，渲染输出的更新步骤是这样的：

原先内容为1的<div>元素内容变成0，原先内容为2的<div>元素内容变成1，……以此类推，最后新增一个<div>元素，内容为9。

在这种情况下，Vue会通过改变原来元素的内容和增加/减少元素来完成这个改变，因为没有key属性，Vue无法跟踪每个节点，只能通过这样的方法来完成变更。

让我们对以上代码进行一个小修改：

&