VUE2.x中key关键字的作用以及为什么不能用index做key（解读并展示官网说法）
发布时间
阅读量：
阅读量
直接上图
本文适用于那些不理解为何需要键值对的人。
它能够实现将数据项与索引关联起来的功能。
例如，在VUE中，默认情况下会采用"就地更新"策略。
当Vue正在更新使用v-for渲染的元素列表时，
它默认会采用"就地更新"策略。
如果数据项的顺序被改变，
Vue不会移动DOM元素来匹配数据项的顺序，
而是就地更新每个元素，
并确保它们在每个索引位置正确渲染。
这个机制类似于VUE 1.x中的track-by="$index"模式。
这种默认的行为非常高效，
但它仅适用于不依赖子组件状态或临时DOM状态的情况（例如表单输入值）。
此句话源自官网，
而本文则对其进行了详细解析。
<div class="content">
<ul>
<li v-for="(list,index) in lists">
{{list.id}}-{{list.name}}
<button @click='deletelist(index)'>删除{{list.id}}</button>
<input>
</li>
</ul>
</div>
<script>
const vm = new Vue({
el:'.content',
data:{
lists:[
{id:1,name:'bob'},
{id:2,name:'web'},
{id:3,name:'joke'}
]
},
methods: {
deletelist(index){
this.lists.splice(index,1);
}
},
})
</script>
点击删除2
我们注意到第二个input被移动到了第三个位置上，在这里Key发挥了作用，并且这并不是我们所预期的结果
问题依旧存在
结论：给key加上index等于没有加，key默认得就是Index
解决：
以Vue作为一个实例为例，在其开发过程中需要追踪各个节点的标识信息，并在此基础上重复利用并按新的顺序排列现有的元素
<div class="content">
<ul>
<li v-for="(list,index) in lists" :key="list.id">
{{list.id}}-{{list.name}}
<button @click='deletelist(index)'>删除{{list.id}}</button>
<input>
</li>
</ul>
</div>
<script>
const vm = new Vue({
el:'.content',
data:{
lists:[
{id:1,name:'bob'},
{id:2,name:'web'},
{id:3,name:'joke'}
]
},
methods: {
deletelist(index){
this.lists.splice(index,1);
}
},
})
</script>
问题解决！
全部评论 (0)
还没有任何评论哟~