Vue key的作用与原理

key相当于给结点做一个标识，相当于每个人都有一个属于自己的身份证号
正常情况下不写key也是可以正常显示的，但是不代表每一种情况它都是对的

<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<button @click.once="add">点击我添加老刘</button>
			<ul>
				<li v-for="(p,index) of persons" :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:{
					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>

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是没有问题的。

key生成的id是被Vue使用了，所以会出现如上代码一种特殊情况，key不可以使用"index"，也不可以不填，要使用"p.id"，是数据的唯一标识
所写的初始数据，Vue会根据数据生成虚拟DOM（Vnodes）（真实的DOM是没有key的），内存中会出现虚拟的节点。然后将虚拟DOM转为真实DOM，用户在网站上操作后，初始化流程结束。根据新数据生成虚拟DOM，通过虚拟DOM对比算法，会在新的虚拟DOM中寻找在初始虚拟DOM中key值相同的节点，开始进行对比，如果对比不一致，则不能复用。会把原先的真实DOM中的Value值直接拿到新的虚拟DOM生成的真实DOM中，所以产生了错位的问题（说白了是之前的输入残留）
如果说使用"index"作为下标使用，当进行数据顺序打乱操作时，就会出现如上问题，除此之外，每一个真实DOM的值都是重新生成，还有效率问题。
而使用"p.id"，使用id作为key，则可以的值在新的虚拟DOM中为一个新的值去对比，剩下的东西直接进行复用，效率较高。
使用v-for的时候，如果不适用key，则Vue在工作时自动把key的值作为index了。
附带一句，在虚拟DOM进行对比时，如果俩人key一样，但是内容不一样，会创建新的DOM；如果没有东西跟它对比，也会创建新的DOM。
文章部分内容摘自【尚硅谷】