Vue 中的key 的原理

1 虚拟DOM中的key 的作用

key 是虚拟DOM的标识，当状态中的数据发生变化的时候，VUE 会根据新数据生成新的虚拟DOM

随后Vue进行新虚拟DOM 和 旧的虚拟DOM的差异比较:

2 对比原则:

2.1 旧的虚拟DOM中找到了与新的虚拟DOM相同的key

若虚拟DOM中内容未变，直接使用真实的DOM

若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面之前的真实DOM

2.2 旧虚拟DOM中未找到与新虚拟DOM相同的key,创建新的虚拟DOM,随后渲染到页面

3 用index作为key可能会引发的问题

3.1 若对数据进行逆序添加，逆序删除等破坏性的操作之后，会产生没有必要的真实DOM更新，效率低

3.2 若结构中还包含输入类的DOM，会产生错误的DOM更新，界面会有问题

4 开发中如何选择key

4.1 最好使用唯一的标识作为key 如id

4.2 不存在对数据破坏顺序的操作，index 作为key 是没有问题的