详解如何理解vue的key属性

2020-06-14 06:14:14易采站长站整理
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