react、vue中的key有什么作用？（key的内部原理）

最新推荐文章于 2024-04-06 04:56:40 发布

去远方啊

最新推荐文章于 2024-04-06 04:56:40 发布

阅读量177

点赞数

分类专栏：笔记文章标签： vue.js react.js javascript

本文链接：https://blog.csdn.net/m0_50693593/article/details/121899678

版权

笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文探讨了React和Vue中key的作用，它用于优化虚拟DOM的Diff算法。当数据变化时，Vue依据key来定位并更新正确的元素。使用相同key的DOM将被复用，减少不必要的DOM操作；而不同key则会导致新DOM创建。用index作为key可能导致效率降低和错误的DOM更新，尤其在涉及数据顺序改变的操作中。最佳实践是使用数据的唯一标识如id作为key，确保高效且准确的列表渲染。

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

react、vue中的key有什么作用？（key的内部原理）

1.虚拟DOM中key的作用

key是虚拟DOM对象标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新的虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:

(1)旧虚拟DOM中找到了与新虚拟DOM相同的key:

若虚拟DOM中内容没变,直接使用之前的真实DOM	若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

(2)旧虚拟DOM中未找到与新虚拟DOM相同的key：

创建新的真实DOM,随后渲染到到页面

2.用index作为key可能会引发的问题:

1.若对数据进行:逆序添加、逆序删除等破坏顺序操作：

会产生没有必要的真实DOM更新==〉界面效果没问题，但效率低。

代码演示：（为personArr添加一个老刘）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="vue.js"></script>
	</head>
	<body>
		<div id="root">
			<h1>遍历数组</h1>
			<button type="button" @click.once="add">添加一个老刘</button> 
			<ul>
				<li v-for="(p,index) in personArr" :key="index">
					{{p.name}}-{{p.age}} <input type="text" />
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false;
			new Vue({
				el: '#root',
				data: {
					personArr:[
						{id:'001',name:'张三',age:'18'},
						{id:'002',name:'李四',age:'19'},
						{id:'003',name:'王五',age:'20'}
					]
				},
				methods:{
					add(){
						const p={id:'004',name:'老刘',age:'50'}
						this.personArr.unshift(p)
					}
				},
			})
		</script>
	</body>
</html>