为什么v-for要用key绑定?
为什么需要key?
在使用v-for渲染的时候 key是虚拟DOM对象的标识,当数据发生变化时,Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较
- 旧虚拟dom中找到与新的虚拟dom的相同的key
1.若虚拟DOM中内容没变, 直接使用之前的真实DOM!
2.若虚拟DOM中内容变了, 则生成新的真实DOM,随后替换掉页面中之前的真实DOM。 - 旧虚拟dom中未找到与新虚拟dom相同key
- 创建新的真实DOM,随后渲染到到页面。
如果用index作为key可能会引发的问题
<!-- html -->
<button @click.once="addPresent">添加一个人</button>
<ul>
<li v-for="(item,index) in listPresent" :key="index">{{item.name}}---<input type="text"></li>
</ul>
<!-- js-->
<script>
data() {
return {
listPresent:[
{id:"001",name:'张三'},
{id:"002",name:'李四'},
{id:"003",name:'王二'},
{id:"004",name:'小明'},
{id:"005",name:'小王'},
],
keyWrod:'',
sortType:0
}
},
methods: {
addPresent(){
this.listPresent.unshift({id:"006",name:'小刚'})
}
},
</script>
操作 | 问题 |
---|---|
若对数据进行:逆序添加、逆序删除等破坏顺序操作 | 会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。 |
如果结构中还包含输入类的DOM | 会产生错误DOM更新 ==> 界面有问题 |
当时用index作为key的唯一标识当在数组的头部添加一个元素的时候会出现input对应混乱并且效率不高原因在于
当数据改变的时候Vue在使用v-for渲染DOM是会先创建新的虚拟DOM 会与当前页面中的dom进行对比进行更新 而在这个demo中 会出现 index作为key的标识渲染dom的时候出现 li 中key值不变 里面的内容是新生成的 input框还是原来的input 从而出现 input和内容对应出错
当使用index作为key的唯一标识会影响v-for渲染dom的性能差(虚拟dom不能复用也可能导致错误)
key的唯一标识如何选着
1.最好使用每条数据的唯一标识作为key, 比如id、身份证号等唯一值。(最好)提高v-for的运行效率
不建议使用
2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作,仅用于渲染列表用于展示--------->v-for默认的key值是index