v-for中key的作用与原理
一、虚拟DOM中key的作用
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue会对新虚拟DOM与旧虚拟DOM的差异进行比较。
二、如何选择key
最好使用每条数据的唯一标识作为key，用一个简单的例子说明：
1.用index作为key时
点击按钮在列表最前方添加赵六用户
<ul>
<li v-for="(p,index) of persons" :key="index">
{{p.name}}
<input type="text">
</li>
<br>
<button @click="Add">在最前方添加一个用户</button>
</ul>
data () {
return {
persons: [
{id: '01', name: '张三'},
{id: '02', name: '李四'},
{id: '03', name: '王五'}
]
}
},
methods: {
Add () {
let p = {id: '04', name: '赵六'}
this.persons.unshift(p)
}
}
点击以后，页面如下图
然而，如果在我点击按钮前，在输入框中输入一些内容
点击按钮后就会变成
很明显，这并不是我们理想中想要呈现的效果。
2.用id作为key时
<ul>
<li v-for="p of persons" :key="p.id">
{{p.name}}
<input type="text">
</li>
<br>
<button @click="Add">在最前方添加一个用户</button>
</ul>
在输入框中输入与之前相同的内容，点击按钮后这次的页面则变成了下图
很明显，这次就对了！
三、原因分析
为什么用id和index作为key出来的效果天差地别呢，首先来分析一下key的作用原理。
用index作为key时：
首先会根据初始数据生成虚拟DOM，然后将虚拟DOM转为真实DOM，在加入新数据以后，再根据新数据生成新的虚拟DOM，此时Vue并不会再重新将新虚拟DOM直接转为真实DOM，而是进行一个虚拟DOM的对比算法。如下：
首先在新的虚拟DOM中按照顺序取出第一项，然后根据标识“key=0”在旧的虚拟DOM中寻找拥有一样“key=0”的节点，然后开始挨个对比。
第一个节点为文本节点，Vue发现一个为张三一个为赵六，不一致，于是将新的文本节点赵六转为真实DOM
然后来到第二个标签节点input，需要注意的是，我们对文本框的输入是在真实DOM中操作的，但在虚拟DOM中两边的标签节点input是一样的，所以这时候Vue不会将它重新转成真实DOM，而是直接复用左边的。
以此类推，key等于1和等于2时，文本节点重新转为真实DOM，标签节点复用。
当来到key等于3这一项时，发现左边并没有key是等于3的一项，所以这个时候，Vue直接将右边key等于3这一项直接转为真实DOM。
用id作为key时：
首先也是按照顺序取出第一项，然后根据标识“key=04”在左边寻找拥有同样key的一项，发现没有，于是直接转为真实DOM。
然后按顺序取出第二项，根据标识“key=01”，在左边寻找也是“key=01”的一项，挨个对比文本节点和标签节点，发现两个节点都完全一样，所以直接复用之前的真实DOM。
以此类推，李四和王五都是直接复用左边的真实DOM。
四、总结
- 用index作为key可能会引发的问题：若对数据进行逆序添加、逆序删除等破坏顺序的操作时，会产生没有必要的真实DOM更新，此时界面效果没有问题，但效率太低。
- 在开发中如何选择key：最好使用每条数据的唯一标识作为key，比如id、身份证号、手机号等，如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
