阅读数:126 评论数:0

在列表渲染时使用key属性

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

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

numbers的值原来是[1,2,3]，现在变为[0,1,2,3]，在没有key属性的情况下，渲染输出的更新步骤：

原先内容为1的div元素内容变成0，原先内容为2的div元素内容变成2，...，最后新增加一个div元素。

当使用key属性后，渲染变为：新增加一个div，它的内容为0，并将它插入原先内容0的元素之前。

在有了一key属性之后，vue会记住元素们的顺序，并根据这个顺序在适当的位置插入/删除元素来完成更新，这种方法比没有key属性的效率高。

使用key属性强制替换元素

key属性还有另外一种使用方法，即强制替换元素，因为当key改变时，vue认为一个新的元素产生，从而会新插入一个元素来替换掉原来的元素。