【Vue】中Key的作用

Vue中key的作用

虚拟DOM

虚拟DOM 本质上是一个js对象 ，通过对象来表示真实的DOM结构。

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM

key的原理及作用

Key是对节点进行的一个标识，在Vue中，Key作为Vue中对比算法的标识，在数据修改后，可以通过Key进行这个唯一标识进行对比虚拟DOM，从而决定对节点的重新加载以及复用

Key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。

Key的对比规则

旧虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没变, 直接使用之前的真实DOM！
- 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM，随后渲染到到页面。实例展示

实例展示

在这里插入图片描述

前端代码展示

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>key的原理</title>
	<script type="text/javascript" src="../js/"></script>
</head>

<body>
	<div id="root">
		<!-- 遍历数组 -->
		<h2>人员列表（遍历数组）</h2>
		<button @click.once="add">添加一个老刘</button>
		<ul>
			<li v-for="(p,index) of persons" :key="index">
				{{p.name}}-{{p.age}}
				<input type="text">
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el: '#root',
			data: {
				persons: [
					{ id: '001', name: '张三', age: 18 },
					{ id: '002', name: '李四', age: 19 },
					{ id: '003', name: '王五', age: 20 }
				]
			},
			methods: {
				add() {
					const p = { id: '004', name: '老刘', age: 40 }
					this.persons.unshift(p)
				}
			},
		})
	</script>

</html>

在列表渲染中，使用的是index作为key，并没有选择data中的作为key，并且在输入框输入对应的信息

在这里插入图片描述

然后点击添加一个老刘，看会出现什么情况

在这里插入图片描述

此时我们会发现，当点击按钮添加信息后，备注项输入框内容发生了错误，添加人员后，备注项内容并没有跟随对应的节点，此时我们再使用作为key，则发现就不会出现这种情况

使用作为key：

在这里插入图片描述

index作为key时为什么会出现错乱的原理

在这里插入图片描述

作为key时的实现原理

在这里插入图片描述

用index作为key可能会引发的问题：

在使用中并不是不能用index左右key，只是在以下情况下使用index作为key可能会出现错乱

若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key

最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key

最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

秒客网

【Vue】中Key的作用