vue.js中的循环渲染中的key-CSDN博客

本文链接：https://blog.csdn.net/weixin_46282323/article/details/147940178

在 Vue 中，v-for 渲染列表时的 :key 非常关键。它的作用是帮助 Vue 更高效、准确地识别每个节点的身份，从而在 DOM 更新时进行最小化的 DOM 操作。

🧠 一句话理解

key 是每个节点的唯一标识，用来优化虚拟 DOM 的“diff”过程，确保高效且正确地更新界面。

🔧 为什么需要 key？

当数据发生变化时，Vue 不会全部重新渲染页面，而是通过虚拟 DOM diff 算法找出最小差异并打补丁（patch）。在这个过程中：

如果你没有指定 key，Vue 只能根据顺序去匹配新旧节点，可能会复用错误的元素。
有了 key，Vue 就能准确地定位每个节点，知道哪些元素是被移动了，哪些是新增或删除。

⚙️ 原理详解

Vue 的 diff 过程是基于同层级节点的比较。它使用 key 来：
1. 快速找到旧节点中是否存在相同的 key。
2. 如果找到了，就复用旧节点（只做数据替换）。
3. 如果没找到，就说明是新增节点，旧节点要被删除。

实例理解

有一个人员信息的列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>key的原理</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<div>key的原理</div>
			<button @click="add">添加一个新的人</button>
			
			<ul>
				<li v-for="(item,index) in persons" :key="index">
					{{item.name}}-{{item.age}}
					<input  type="text"/>
				</li>
			</ul>
		</div>
	</body>
	
	<script>
		
		var vm = new Vue({
			el:'#app',
			data(){
				return{
					persons : [
					  {
					    id: 1,
					    name: "Alice Johnson",
					    age: 28,
					    gender: "Female",
					    email: "alice.johnson@example.com",
						remark:""
					  },
					]
				}
			},
			
			methods:{
				add(){
					this.persons.unshift({
						id: 2,
						name: "fgfdgfdg",
						age: 41,
						gender: "Male",
						email: "edward.brown@example.com",
						remark:""
					})
				}
			}
		})
	</script>
</html>