vue的虚拟dom和虚拟dom的diff算法

什么是虚拟dom

虚拟dom其实是里面内存型对象（js内存对象）属于内存数据 真实dom的一层映射

第一步

1. 内存中生成一颗虚拟dom树
   
2. 将内存中的虚拟dom树初始化渲染成真是dom树
3. 当我们修改打塔里面的数据的数据的时候
   
4. 将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
   
5. 将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比，对比差异（diff算法）
6. 将对比出来的差异的部分进行重新真实dom结构的渲染

diff算法

虚拟dom中，在dom的状态发生变化时，虚拟dom会进行diffyunsuan，来更新只需要被替换的dom，而不是全部重绘
在diff算法中，只平层的比较前后两颗dom树的节点，没有进行深度的遍历

1. 如果节点类型改变，直接将旧节点卸载，替换为新节点，旧节点包括下面的子节点都将被卸载，如果新节点和旧节点仅仅是类型不同，但下面的所有节点都一样，这样做也是效率不高的一个地方。
2. 节点类型不变，属性或者属性值改变，不会卸载节点，执行节点更新的操作。
3. 为本改变，直接修改文字内容。
4. 移动，增加，删除节点：

写代码时，如果没有给数组或者枚举类型定义一个key，就会采用上面的粗暴算法。
如果为元素增加key后，vue就能根据key，直接找到具体的位置进行操作，效率比较高。如下图：