Vue—key的使用
1. 用法<div v-for="item in items":key="item.id"><!-- 内容--></div>最常见的用例是结合 v-for。2. 使用意义提高循环性能。key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时
·
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会造成渲染错误。
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)