作用：给节点做一个标识，相当于人类的身份证号,虚拟DOM中的标识
下列是key值的一些使用场景和带来的问题：
js:
const vm = new Vue({
el: '#root',
data: {
persons: [
{ id: 001, name: '小卢', age: 18 },
{ id: 002, name: '小刘', age: 19 },
{ id: 003, name: '小胡', age: 20 },
]
},
methods: {
add() {
const t = { id: 004, name: '小王', age: 40 };
this.persons.unshift(t)
}
},
})
html:
第一种情况：将key的值设为index索引,这也是如果你不设置单独的key时,Vue默认将index索引作为key的值
<div id="root">
<ul>
<li v-for="(p,index) in persons" :key="index">
{{p.name}} <input type="text">
</li>
<button @click="add">添加一个小王</button>
</ul>
</div>
运行流程:初始数据=>虚拟数据=>真实DOM=>按钮后的新数据=>虚拟新数据=>虚拟进行diff对比算法=>新Dom
后果：如第一种情况如果你在真实dom中输入了值就会出现对应出错的问题.因为在diff对比中，输入类的DOM是一样的，
diff就会将原来的DOM复制过来直接渲染在页面上。然后会打乱diff复制的算法，使后面的dom都需要重新从虚拟DOM里面转为真实DOM,使效率变低
总结：如果你对数据进行逆向添加，逆序删除等操作，就会产生没必要的DOM更新
如果结构中还包含输入类的DOM,会产生页面有问题