什么是虚拟dom?
1、虚拟 DOM 的最终目标是将虚拟节点渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的 DOM 操作。例如,一个 ul 标签下很多个 li 标签,其中只有一个 li 有变化,这种情况下如果使用新的 ul 去替代旧的 ul,因为这些不必要的 DOM 操作而造成了性能上的浪费。
为了避免不必要的DOM 操作,虚拟 DOM 在虚拟节点映射到视图的过程中, 将虚拟节点与上一次渲染视图所使用的旧虚拟节点(oldVnode)做对比,找出真正需要更新的节点来进行 DOM 操作,从而避免操作其他无需改动的 DOM。
简而言之主要做了两件事:
提供与真实DOM 节点所对应的虚拟节点 vnode 将虚拟节点vnode 和旧虚拟节点 oldVnode 进行对比,然后更新视图
什么是diff算法?
- 虚拟DOM可以借助DOM diff将多余的操作省掉,比如需要添加1000个节点,但是只有10个节点是新增的,虚拟DOM可以通过diff算法,实现只对新增的10个节点进行添加,其他节点不需要任何改动,这就是所说的diff算法。