key ,第二个是使用了
key 。可以看到我点了按钮后,第一个只是更新
<p> 标签的内容节点。第二个是移动了某一项的
<li> 标签。

ps: 另外可以通过chrome的dom断点功能查看子元素的插入删除。
DOM 更改断点
key的其他用途
key不是只能用在v-for上还可以用在其他元素上。如下代码
<div v-if="toggle">Hello</div>
<div v-else>Goodbye</div>切换toggle时,它也是切换div。如果你想用上enter/leave animations时,即节点插入和删除的时候的动画时就要打破这个复用,如下:
<transition>
<div v-if="toggle" key="1">Hello</div>
<div v-else key="2">Goodbye</div>
</transition>总结
如果你的列表不发生变化,或者你只是往列表最后一项添加元素则看似不必要增加
key 字段。但是你的项目中有很多列表的时候,你有的需要加
key ,有的不需要加。还不如所有的都加上呢避免别人理解困难(^._.^)ノ。参考链接
https://vuejs.org/v2/guide/list.html#key
vuejs.org/v2/api/#key
https://forum.vuejs.org/t/simple-clarification-of-when-using-key-with-v-for-is-appropriate-and-why/28966/5










