虚拟DOM

为什么出现虚拟DOM

在我们使用 JS/Jquery直接对 DOM 元素进行操作时，不管是对元素样式的修改（背景颜色从红色变成蓝色）还是对页面中的某些布局进行动态调整（通过点击按钮在列表中添加一行新的数据），这都会造成页面的重新渲染，从而影响我们网站的性能。而在 Vue中，通过在内存中生成与真实DOM 与之对应的数据结构（虚拟DOM），当页面发生变化时，通过新的虚拟DOM树与旧的虚拟DOM树进行比对，就能很快的找出差异点，从而得出应施加到真实 DOM上的改动。

虚拟DOM工作原理

虚拟DOM是优化频繁操作DOM引发性能问题的产物，将页面的状态抽象为JS对象的形式，本质上是JS和真实DOM的中间层。当我们想要用JS脚本大批量进行DOM操作时，会优先作用于Vistual DOM这个对象，最后通过对比将要改动的部分通过并更新到真实的DOM
原理图如下：

虚拟DOM优点

Vistual DOM可以将多个改动合并成一个批量的操作，从而减少了DOM重排的次数，进而缩短了生成渲染树和绘制所花的时间