vue的v-for数组赋值中key的作用原理_vue v-for :key 设置-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41339192/article/details/103005106

本文探讨了在Vue的v-for指令中使用key属性对于数组赋值和性能的影响。通过代码实例展示了无key时，Vue如何处理元素插入，并对比了添加key后的不同。当添加key时，由于Vue利用虚拟DOM，可以更高效地定位并更新元素，特别是在处理大量数据时，性能优化效果显著。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码实例

未添加key属性的代码

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item, index in books">{{item}}-{{index}}</li>
			</ul>
		</div>
	</body>
</html>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const fiveVue = new Vue({
		el: '#app',
		data: {
			books: ['西游记','红楼梦','三国演义','水浒传']
		}
	})
</script>

在此代码中我做的事情时，通过vue的v-for将数据渲染到页面，
然后添加通过在vue实例的data中的books数组添加一个数据来分析

未添加key属性的原始效果图

在这里插入图片描述

未添加key属性时在下标为2的位置添加元素效果图

在这里插入图片描述

添加key属性之后的代码

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item, index in books" :key="item">{{item}}-{{index}}</li>
			</ul>
		</div>
	</body>
</html>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const fiveVue = new Vue({
		el: '#app',
		data: {
			books: ['西游记','红楼梦','三国演义','水浒传']
		}
	})
</script>

不难看出前后两段代码的差距仅仅在于 li 中的key的有无，
但是两者存在性能的差距

原理剖析---举个栗子：

数组arr = [a,b,c,d]
	0->a
	1->b
	2->c
	3->d
在下标2位置插入一个e
	未添加key：
	0->a
	1->b
	2->e  e替换C
	3->d  c将替换d，在最后添加一个d
		最终：
		0->a
		1->b
		2->e
		3->c
		4->d
	有key：
	0->a
	1->b
	2->e  创建一个e，将c和d一起后移
		最终：
		0->a
		1->b
		2->e
		3->c
		4->d

栗子解析：

在上面的第二张图中
在这里插入图片描述
通过splice在第二个位置添加一个元素
在是否有key 时插入元素差异就在与对此下标之后的元素的处理
如上面的栗子：

数组arr = [a,b,c,d]
0->a
1->b
2->c
3->d
未添加key时插入数据e，整个实现过程相当于，将e替代c，然后c替代d，之后在添加一个下标4来放d
而在添加key后插入数据e，vue中存在虚拟dom，渲染数据时，会优先找虚拟dom，为添加key，在虚拟dom中就找不到需要的东西，就会重新创建，添加key后，key对应的东西存放到虚拟dom，在使用渲染时，会从虚拟dom中找到对应key进行渲染
而我在上面的代码中有一句

<li v-for="item, index in books" :key="item">

这里面将此时的key赋值为item，所以在添加渲染时，会找到虚拟dom中，key指向的值 item就对应绑定到了一起，key和值item是一一对应，就不需要重新创建，而是直接渲染，在最后也不会重新创建一个d，免去了创建的时间，在对大量数据的时候性能的优化会比较明显

下面给一个过程图对比

在这里插入图片描述