VUE中列表渲染key的作用与原理

白桃气泡水儿

已于 2022-02-12 13:06:00 修改

阅读量280

点赞数

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

于 2022-02-11 14:50:09 首次发布

本文链接：https://blog.csdn.net/qq_43593646/article/details/122880095

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细探讨了在Vue和React中key的作用，解析了其在虚拟DOM diff过程中的重要性。key作为每个元素的唯一标识，帮助优化渲染性能，避免不必要的DOM操作。文章列举了使用index作为key可能带来的问题，并给出了在不同场景下选择key的建议，强调了使用数据唯一标识的最佳实践。

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

1.数据代理
在这里插入图片描述
2.列表渲染key的作用与原理

<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<button @click.once="add">添加一个老刘</button>
			<ul>
				<li v-for="(p,index) of persons" :a="p.id">
					{{p.name}}-{{p.age}}
					<input type="text">
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			Vue.config.productionTip = false
			
			new Vue({
				el:'#root',
				data:{
					persons:[
						{id:'001',name:'张三',age:18},
						{id:'002',name:'李四',age:19},
						{id:'003',name:'王五',age:20}
					]
				},
				methods: {
					add(){
						const p = {id:'004',name:'老刘',age:40}
						this.persons.unshift(p)
					}
				},
			})
		</script>

使用唯一标识作为key
原理：
在这里插入图片描述

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

					1. 虚拟DOM中key的作用：
									key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
									随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
									
					2.对比规则：
								(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
											①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
											②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

								(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
											创建新的真实DOM，随后渲染到到页面。
											
					3. 用index作为key可能会引发的问题：
										1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
														会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

										2. 如果结构中还包含输入类的DOM：
														会产生错误DOM更新 ==> 界面有问题。

					4. 开发中如何选择key?:
										1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
										2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
											使用index作为key是没有问题的。