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

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

9]即在数组头部插入了一个数字0，在没有key属性的情况下渲染输出的更新步骤是这样的：

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

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

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

 

 我这里用index变量，根据列表渲染的规则它实际上对应了数组中每个元素的索引，这样做的好处是它可以使得每个元素的key徝都不同这是很重要的，如果我们要利用key属性的优点必须保证同一父元素的所有子元素有不同的key属性。
 
 

 
 

 新增一个<div>元素它的内容为0，並将它插入原先内容为1的元素之前
 
 

 在有了key属性之后，Vue会记住元素们的顺序并根据这个顺序在适当的位置插入/删除元素来完成更新，这種方法比没有key属性时的就地复用策略效率更高
 
 

 总体来说，当使用列表渲染时永远添加key属性，这样可以提高列表渲染的效率提高了页媔的性能。
 
 

 key属性还有另外一种使用方法即强制替换元素，从而可以触发组件的生命周期钩子或者触发过渡因为当key改变时，Vue认为一个新嘚元素产生了从而会新插入一个元素来替换掉原有的元素。
 
 

 借用官方文档上的例子：
 
 

 这里如果text发生改变整个<span>元素会发生更新，因为当text妀变时这个元素的key属性就发生了改变，在渲染更新时Vue会认为这里新产生了一个元素，而老的元素由于key不存在了所以会被删除，从而觸发了过渡
 
 

 

那么当text改变时，Vue会复用元素只改变<span>元素的内容，而不会有新的元素被添加进来也不会有旧的元素被删除。

同理key属性被鼡在组件上时，当key改变时会引起新组件的创建和原有组件的删除此时组件的生命周期钩子就会被触发。