官方文档中说:
当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。...在这种情况下,Vue会通过改变原来元素的内容和增加/减少元素来完成这个改变,因为没有key属性,Vue无法跟踪每个节点,只能通过这样的方法来完成变更。...此时如果numbers从[1, 2, 3, 7, 8, 9]变成了[0, 1, 2, 3, 7, 8, 9],渲染输出的更新步骤就变化了:
新增一个元素,它的内容为0,并将它插入原先内容为1的元素之前...在有了key属性之后,Vue会记住元素们的顺序,并根据这个顺序在适当的位置插入/删除元素来完成更新,这种方法比没有key属性时的就地复用策略效率更高。...借用官方文档上的例子:
{{text}}
这里如果text发生改变,整个元素会发生更新