key是虚拟DOM中标识,数据发生变化时,新数据虚拟DOM会根据key跟旧数据虚拟DOM进行比对;
如图:
没有绑定key值:
当勾选辞暮尔尔,再点击删除之后,勾选直接来到了烟火年年.
这就是渲染列表数据,并且列表数据还有增删改查操作,没有绑定key值的原因
----------->
绑定key值:
绑定key值后,勾选框随着删除也一并消失了.
----------->
总结:
1.虚拟DOM中key的作用:
key是虚拟DOM对象的标识,当数据发生变化时,vue会根据新旧虚拟DOM通过diss算法比对.
2.开发中如何选中key?:
- 最好使用每条数据中唯一的标识:名字,id,身份证等等.
- 如果不存在对渲染数据的增删改查,逆序操作等破坏顺序的操作,仅渲染展示,可以用index下标做为key.
代码:
<template>
<view>
<view v-for="(k,index) in list" class="box" :key="k">
<checkbox />
{{k}}--{{index}}
<text @tap='handleDelete(index)'>删除</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: [
'辞暮尔尔',
'烟火年年',
'朝朝暮暮',
'岁岁平安',
]
}
},
methods: {
handleDelete(index) {
console.log(index)
this.list.splice(index,1)
}
}
}
</script>
<style lang="scss">
.box {
background-color: #dadada;
margin: 5px 0;
}
</style>