Vue—key的使用

1.      用法

<div v-for="item in items":key="item.id">
<!-- 内容-->
</div>

最常见的用例是结合 v-for。

2.     使用意义

提高循环性能。key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。有相同父元素的子元素必须有独特的key。

当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。

 

3.      报错

如果拥有相同父元素的子元素，绑定重复的key，可能会提示报错信息

can't set property 'key' of undefined

 

4.      报错原因

重复的key会造成渲染错误。