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