虚拟DOM的理解

虚拟dom在vue的作用

• 虚拟dom的最终目标是为了将虚拟节点渲染到视图上。
• 减少不必要的dom操作,节省性能
• 虚拟dom在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的旧虚拟节点对比，找出真正需要更新的节点进行dom操作，进而避免其他无需改变的节点

虚拟DOM在vue.js的主要作用：

• 提供与真实DOM节点所对应的虚拟节点vnode
• 将虚拟vnode节点与之前的虚拟oldVnode节点进行对比，然后更新视图

虚拟dom的基础操作

1. 在内存中生成一个虚拟dom树
2. 将内存中的虚拟dom树初始化渲染成真实dom树
3. 当修改data数据修改
4. 将之前的虚拟dom树结合新的数据生成一个新的虚拟dom树
5. 生成的新的虚拟dom与上一次的虚拟dom进行对比，对比差异(diff算法)
6. 将对比出来的差异部分进行重新的dom渲染

vue的diff算法

diff算法中，只是平层的比较前后两颗DOM树的节点，没有进行深度遍历

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

虚拟DOM中，在DOM的状态发生变化时，虚拟DOM会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘

此文是从各处搜索借鉴而来的，有些不完整，单纯只是想自己记下来加深下印象。