vue中key属性的作用

  • Post author:
  • Post category:vue


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