理解虚拟DOM，key

虚拟dom的目的是为了减少前端应用对真实dom节点的操作，它是真实dom的一层映射，将真实dom转换成了js对象的形式存储在内存中，当dom需要发生变化时，只需要修改虚拟dom的内存数据，然后通过diff算法将改变的地方局部渲染到真实dom上，并不会引起真实dom的全部渲染。

key的作用：为了减少复杂度，diff算法在进行计算的时候仅仅是对同级元素之间进行对比，因此复杂度为n。而key的作用就是给同级之间的兄弟元素添加一个唯一的 标识，使得每一个兄弟节点都是唯一的，当数据发生变化的时候，就会通过diff算法并根据key的标识，针对性的改变需要改变的节点，使得每一次改变都不会影响到其他节点的变化。大大提高了更新虚拟dom的效率。另一方面还会防止出现的一些错误。比如。。。

虚拟dom ===> js内存对象、即内存数据

浏览器渲染的流程：
1、内存中构建虚拟dom树（js对象）；
2、将内存中的虚拟dom映射成真实dom（html）；
当数据改变之后：
1、将之前的虚拟dom树结合新的数据生成新的虚拟dom树；
2、将新生成的虚拟dom树和上一次的虚拟dom树进行对比（diff算法）；
3、将对比出来的差异进行重新渲染；

可以看出，当数据发生变化的时候，虚拟dom的存在将大量的真是dom操作变成了内存数据的操作，只是在内存数据比对完成之后最后进行一次性的渲染。因为对内存数据的操作效率是远远高于对真实dom的操作效率的，所以虚拟dom提升了性能。