虚拟DOM和Diff算法
虚拟DOM产生是因为真实DOM的体积通常非常大，当需要进行页面更新时若使用真实DOM进行比较会消耗大量时间和内存，效率十分低下。而如果使用虚拟DOM，仅需要保留必要的属性，进行比较时速度会快上很多而且所占资源也非常少。
Diff算法运行原理
Diff算法进行比较时最小的比较粒度是一个标签，当一个标签发生变化时Diff就会运行进行新旧虚拟DOM的比较。
key的作用
key值是作为虚拟DOM对象的标识，在更新显示时key值作为索引去拿去和旧DOM对象比较。
当状态中的数据发生变化时，vue会根据新数据的生成新的DOM，随后会拿新DOM和旧DOM进行Diff比较。
- 虚拟DOM中找到了与新虚拟DOM相同的key：
- 若虚拟DOM中内容没有变化，直接使用之前的真实DOM
- 若虚拟DOM中的内容发生变化，则生成新的真实DOM
- 旧虚拟DOM中没有找到与新虚拟DOM相同的key，直接根据数据创建新的真实DOM渲染到页面。只会创建新key值虚拟DOM的真实DOM
用index做key可能引发的问题
- 若对数据进行逆序添加、逆序删除等会破坏数据顺序的操作，会产生不必要的真实DOM更新，虽然界面显示没有问题，但是效率会很低
- 如果结构中还包含输入类的DOM则会产生错误的DOM更新，最常见的就是导致了页面输入DOM中的数据错乱