浅谈vue虚拟DOM

浅谈vue虚拟DOM

虚拟DOM可以看作是一个使用javascript模拟了DOM的树形结构，这个树结构包含整个DOM结构的信息。

上面的DOM结构，不论是标签名称还是标签的属性或标签的子集，都会对应在下面的树结构(其实就是一个对象)里

​ 传统方式用js操作DOM会有很多额外的DOM操作，例如，一个ul标签下有很多个li标签，其中只有一个li有变化，这种情况下如果使用新的ul去替代旧的ul，其实除了那个发生变化的li节点之外，其他节点都不需要重新渲染。由于DOM操作比较慢，所以这些DOM操作在性能上会有一定的浪费，避免这些不必要的DOM操作会提升很大一部分浏览器的性能。因为DOM操作的执行速度远不如Javascript的运算速度快，因此，把大量的DOM操作搬运到Javascript中，运用patch算法来计算出真正需要更新的节点，最大限度地减少DOM操作，从而显著提高性能。

​ 为了避免不必要的DOM操作，虚拟DOM在虚拟节点映射到视图的过程中，将虚拟节点与上一次渲染视图所使用的虚拟节点(oldVnode)做对比，找出真正需要更新的节点来进行DOM操作，从而避免操作其他无任何改动的DOM。对两个虚拟节点进行对比是虚拟DOM中最核心的算法即patch，patch算法的核心是diff算法，它可以判断出哪些节点发生了变化，从而只对发生了变化的节点进行更新操作。