关于虚拟DOM

虚拟DOM

本质上来讲，虚拟DOM是一个JS对象，会将页面状态抽象为一个JS对象，是对DOM的抽象，这个对象是更加轻量级的对DOM的描述。设计的目的就是为了可以更好进行跨平台。在代码渲染时，Vue会把代码转换为一个对象（虚拟DOM）。以对象的形式来描述真实DOM结构，最终渲染到页面。在每次发生变化之前，虚拟DOM都会缓存一份，变化之前，现在的虚拟DOM都会与之前缓存的虚拟DOM进行比较。在Vue内部安装了diff算法，渲染发生改变的数据，未发生改变的数据通过原先的数据进行渲染

虚拟DOM解析过程

1. 首先对将要插入到文档中的DOM结构树进行分析，使用JS对象将其表现出来，将这个JS对象数表现出来，然后再将DOM片段插入到文档中
2. 当页面状态改变时，根据变更的状态重新构建出一颗对象树，将两颗树进行比较，将有差异的地方应用到真正的DOM树中，完成视图的更新

为什么要用虚拟DOM

两者性能消耗比较：

1. 真实DOM：生成HTML字符串+重建DOM元素
2. 虚拟DOM：生成vNode+DOMdiff+必要的DOM更新

可以减少性能消耗，虚拟DOM本质上是JS对象，可以很方便的跨平台操作，比如服务端渲染、uniapp等

虚拟DOM真的比真实DOM性能好吗？

1. 在首次渲染时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢
2. 在真实DOM操作时，可以进行针对性的优化，还是比较快的

DIFF算法原理

Diff算法的原理是通过比较新旧节点的属性和子节点，找出它们之间的差异，然后根据差异来更新实际DOM节点。在虚拟DOM树从上至下进行同层比对时，如果上层已经不同了，那么下面的DOM全部重新渲染。这样的好处是算法简单，减少比对次数，加快算法完成速度。