1.      用法


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

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

2.     使用意义

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

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

 

3.      报错

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

can't set property 'key' of undefined

 

4.      报错原因

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


Logo

前往低代码交流专区

更多推荐