浅谈VUE中演示v-for为什么要加key
更新时间：2020年01月16日 16:38:18 作者：Nanshannan
这篇文章主要介绍了浅谈VUE中演示v-for为什么要加key，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
说到这个问题想必要举个例子了
没有key
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item, i) in list">
<input type="checkbox"> {{item.name}}
</li>
</ul>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '吕不韦' },
{ id: 3, name: '嬴政' }
]
},
methods: {
add() {
//注意这里是unshift
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
}
});
</script>
</div>
当选中吕不为时，添加楠楠后选中的确是李斯，并不是我们想要的结果，我们想要的是当添加楠楠后，一种选中的是吕不为
有key
<div id="app">
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item, i) in list" :key="item.id">
<input type="checkbox"> {{item.name}}
</li>
</ul>
<script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
name: '',
newId: 3,
list: [
{ id: 1, name: '李斯' },
{ id: 2, name: '吕不韦' },
{ id: 3, name: '嬴政' }
]
},
methods: {
add() {
//注意这里是unshift
this.list.unshift({ id: ++this.newId, name: this.name })
this.name = ''
}
}
});
</script>
</div>
同样当选中吕不为时，添加楠楠后依旧选中的是吕不为。
可以简单的这样理解：加了key(一定要具有唯一性) id的checkbox跟内容进行了一个关联。是我们想达到的效果
查过相关文档，图例说明很清晰。
vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设
首先讲一下diff算法的处理方法，对操作前后的dom树同一层的节点进行对比，一层一层对比，如下图：
当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。
比如一下这个情况：
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了在Vue中如何使用Cookie操作实例的相关资料,需要的朋友可以参考下2017-07-07
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
这篇文章主要介绍了vue.js基于v-for实现批量渲染 Json数组对象列表数据,结合实例形式分析了vue.js使用v-for遍历json格式数据渲染列表相关操作技巧,需要的朋友可以参考下2019-08-08
由于开发需要,我需要在登录成功请求成功后,调用父窗口的一个点击事件方法,这篇文章主要给大家介绍了关于vue跨窗口通信之新窗口调用父窗口的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue-cli中安装方法(图文详细步骤)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
解决element ui el-row el-col里面高度不一致问题
这篇文章主要介绍了解决element ui el-row el-col里面高度不一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue中如何通过iframe方式加载本地的vue页面，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了Vue混入mixins滚动触底的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
vue-cli对element-ui组件进行二次封装的实战记录
组件类似于需要多个地方用到的方法,在Vue中组件就是一种复用（经常使用）一个功能的手段,下面这篇文章主要给大家介绍了关于Vue element ui二次封装的相关资料,需要的朋友可以参考下2022-06-06
vue+element搭建后台小总结 el-dropdown下拉功能
这篇文章主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
本篇文章给大家分享了关于Vue多系统切换实现的解决方案，对此有需要的朋友可以跟着参考学习下。2018-06-06
最新评论