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

最新推荐文章于 2024-09-02 10:07:02 发布

自由的音符

最新推荐文章于 2024-09-02 10:07:02 发布

阅读量2.2k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

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

版权

Vue 专栏收录该内容

48 篇文章 5 订阅

订阅专栏

本文详细探讨了Vue中key的作用，指出其主要目的是为了高效更新DOM，通过key可以精准识别节点，减少不必要的DOM操作，提升性能。在列表更新时，不设置key可能导致难以察觉的bug。同时，key在Vue的过渡效果中也有重要作用，用于区分相同标签名的元素。文章通过代码示例展示了key在Vue diff算法中的应用。

摘要由CSDN通过智能技术生成

你知道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指挥替其内部属性而不会触发过渡效果