Vue学习--key

最新推荐文章于 2024-01-17 13:04:41 发布

⊙ω⊙ 在学习的路上越走越远～～～

最新推荐文章于 2024-01-17 13:04:41 发布

阅读量368

点赞数 1

分类专栏： Vue 文章标签： linux bash 运维

原文链接：https://blog.csdn.net/weixin_42657492/article/details/106142225

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue中的key

1、定义

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素
示例

<div id="app">
	<div>
		<input type="text" v-model="name">
		<button @click="unshift">前面添加</button>
		<button @click="push">后面添加</button>
		<button @click="splice">在第2条后添加</button>
		<button @click="exchange">第一条li与第二条互换</button>
	</div>
	<ul>
		<li>没有key</li>
		<li v-for="(item, i) in list">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
	<hr>
	<ul>
		<li>key="i"</li>
		<li v-for="(item, i) in list" :key="i">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
	<hr>
	<ul>
		<li>key="item.id"</li>
		<li v-for="(item, i) in list" :key="item.id">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			name: '',
			newId: 3,
			list: [{
					id: 1,
					name: '李斯'
				},
				{
					id: 2,
					name: '吕不韦'
				},
				{
					id: 3,
					name: '嬴政'
				}
			]
		},
		methods: {
			unshift() {
				this.list.unshift({
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			push() {
				this.list.push({
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			splice() {
				this.list.splice(2,0,{
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			exchange() {
				const del = this.list.splice(1,1);
				this.list.unshift(del[0]);
			}
		}
	});
</script>

在这里插入图片描述

当选中吕不为时，前面添加楠楠
当选中吕不为时，后面添加楠楠
当选中吕不为时，在第二条后添加楠楠
第一条li与第二条互换

2、结论

key的作用就是更新组件时判断两个节点是否相同。相同就复用，不相同就删除旧的创建新的。如果不添加key组件默认都是就地复用，不会删除添加节点，只是改变列表项中的文本值，要知道节点操作是十分耗费性能的。而添加了key之后，当对比内容不一致时，就会认为是两个节点，会先删除掉旧节点，然后添加新节点。
没有key时，前3个节点复用，只修改值，在最后添加了一个新节点
key="i"时，当新节点的key与旧的key相同时，则复用旧节点，key为0，1，2的节点会复用旧节点，选中的节点为key=“1”,
key="item.id"时，此id为唯一值，所以其它3个旧节点都会复用

其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。

要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。

我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。