<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
<!-- 准备一个容器 -->
<div id="root">
<!-- 遍历数组 -->
<h2>学生列表</h2>
<button @click.once="add">添加一个学生</button>
<ul>
<li v-for="(p,index) of Students" :key="index">{{p.name}}-{{p.age}}<input type="text"></li>
<!-- <li v-for="(p,index) of Students" :key="p.id">{{p.name}}-{{p.age}}<input type="text"></li> -->
</ul>
</div>
<script>
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
Students:[
{id:'001',name:'孙悟空',age:18},
{id:'002',name:'猪八戒',age:11},
{id:'003',name:'沙悟净',age:13},
]
},
methods: {
add(){
const p = {id:'004',name:'唐三藏',age:20}
this.Students.unshift(p)
}
},
})
</script>
</body>
</html>
当key="index"时的效果为
当key="p.id"时的效果为
为此，画图可能会更加清晰
总结
面试题：react、vue中的key有什么作用？（key的内部原理）\
-
虚拟DOM中key的作用：
key是虚拟DOM的标识，当数据发生变化时，vue会根据‘新数据’生成‘新的虚拟DOM’ 随后vue进行‘新虚拟DOM’与‘旧虚拟DOM’的差异比较，比较规则如下： -
对比规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
① 若虚拟DOM中内容没变，直接使用之前的真实DOM
② 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
（2）旧虚拟DOM中未找到与新DOM相同的key 创建新的真实DOM，随后渲染到页面 -
用index作为key可能会引发的问题：
(1)若对数据进行：逆序添加，逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新==>界面效果没有问题，但效率低
(2)如果结构中还包含输入类的DOM：会产生错误DOM更新==>界面有问题 -
开发中如何选择key？
（1）最好使用每条数据的唯一表示作为key，比如id、手机号、身份证号、学号等唯一值
（2）如果不存在数据的逆序添加，逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
