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值,效率低。