3.vue中key的作用和工作原理？

你知道vue中key的作用和工作原理吗？说说理解

唯一的确定dom元素，从而执行diff算法的时候更高效
源码中找答案：src/core/vdom/patch.js-updateChildern()
测试代码：

<body>
	<div id=" demo">
	<p v-for="item in items" :key="item">{{item}}</p>
	</div>
	<script src="../ . ./dist/vue. js"></script>
	<script>
		// 创建实例 
		constapp=newVue({
			el: ' #demo',
			data: { items: [ 'a', 'b','C','d', 'e'] },
			mounted () {
				setTimeout(() => {
					this. items.splice(2, 0，'f')
					},2000);
				},
			}
		); 
	</ script> 
< / body>

在这里插入图片描述
如果使用key

结论

1.key的作用主要是为了高效的更新DOM,其原理是vue在patch的过程中会执行patchVNode，patchVNode过程时会执行updateChildren的方法，他会去更新所有的两个新旧子元素，在这个过程中，可以通过key可以精准的判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更高效，减少DOM操作，提高性能
2.另外，若不设置key还可能在列表更新是引发一些隐蔽的bug
3.vue中在使用相同标签名元素的过度切换时，也会使用到key属性，其目的也是为了让vue可以区分他们，否则vue指挥替其内部属性而不会触发过渡效果

原文链接：https://blog.csdn.net/weCat_s/article/details/121751444