v-for中key属性的作用_vue循环的key作用

作者：AllinToyou | 2024-06-05 15:08:51

踩

vue循环的key作用

Vue中为v-for提供了一个属性,key,在写v-for的时候,都需要给元素加上一个key属性这个key属性必须是唯一的标识,并且给key赋值的内容不能是可变的

vue不会去改变原有的元素和数据,而是创建新的元素然后把新的元素渲染进去

key属性的作用

1.提升v-for渲染的效率

2.提升渲染性能

若对数据进行:逆序添加,逆序删除等破坏顺序操作,会产生没有必要的真是dom更新,芮然界面效果没问题,但效率低

3.避免数据混乱的情况出现

如果结构中还包含输入类的dom:会产生错误dom更新,出现数据混乱

开发中如何选择key?

1.最好使用每条数据的唯一标识作为key,比如id,手机号,身份证号,学号等唯一值

2.如果不存在对数据的逆序添加,逆序删除等破坏顺序的操作,知识简单的展示数据,用index也是可以的

3.如果对数据的逆序添加,逆序删除等破坏顺序草错,用index作为key值,效率低

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/677014