在列表渲染时使用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认为一个新的元素产生,从而会新插入一个元素来替换掉原来的元素。