Vue ,React中的key有什么作用?

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>