Vue2 第六节 key的作用与原理
（1）虚拟DOM
（2）v-for中的key的作用
一.虚拟DOM
1.虚拟DOM就是内存中的数据
2.原生的JS没有虚拟DOM: 如果新的数据和原来的数据有重复数据，不会在原来的基础上新加数据，而是重新生成一份
3. Vue会有虚拟DOM和真实DOM,原理就是会将虚拟DOM与真实DOM进行比较（使用diff算法）
发现有重复的数据，就不会再次渲染，这样提高了效率
二. v-for中的key的作用
1. 虚拟DOM中key的作用
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】 随后，Vue会进行【新虚拟DOM】和【旧虚拟DOM】的差异比较，对比规则如下
2.对比规则
- 旧虚拟DOM找到了与新虚拟DOM相同的key
① 如果虚拟DOM中的内容没变，直接使用之前的真实DOM
② 如果虚拟DOM中的内容变了，则生成新的真实DOM, 随后替换掉页面中之前的真实DOM
- 旧虚拟DOM中未找到与新虚拟DOM相同的key
① 创建新的真实DOM，随后渲染到页面
3.如果用index作为key可能会引发的问题
① 如果对数据进行逆序添加，逆序删除等破坏顺序的操作，会产生没有必要的真实DOM更新
界面效果没问题，但是效率低
② 如果结构中包含输入类的DOM，会产生错误DOM更新，界面会产生问题
4.使用id作为key,数据不会错乱，而且绿色框部分是新生成的，红色框部分是复用之前的，提高了效率，界面部分也不会错乱
5.如果没有写key,为什么也会有问题？
Vue会把遍历时候的索引值自动作为key，也就是前面的index,所以在使用v-for遍历的时候，一定记得加上key，而且这个key最好是唯一标识符
6.开发中如何正确选择key
① 最好是使用每条数据的唯一标识作为key, 比如id，手机号，身份证号，学号
② 如果不存在对数据的逆序添加，逆序删除等破坏顺序的操作，仅用于渲染界面，并且没有输入型数据时，就可以使用index作为key