虚拟DOM

Vue中的虚拟DOM

Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点称为VNode，用对象属性来描述节点，实际上它是一层对真实DOM的抽象，最终可以通过渲染操作使这棵树映射到真实环境上，简单来说Virtual DOM就是一个Js对象，用以描述整个文档。

虚拟DOM优缺点

优点

• Virtual DOM在牺牲(牺牲很关键)部分性能的前提下，增加了可维护性，这也是很多框架的通性。
• 实现了对DOM的集中化操作，在数据改变时先对虚拟DOM进行修改，再反映到真实的DOM，用最小的代价来更新DOM，提高效率。
• 打开了函数式UI编程的大门。
• 可以渲染到DOM以外的端，使得框架跨平台，比如ReactNative，React VR等。
• 可以更好的实现SSR，同构渲染等。
• 组件的高度抽象化。

缺点

• 首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
• 虚拟DOM需要在内存中的维护一份DOM的副本，多占用了部分内存。
• 如果虚拟DOM大量更改，这是合适的。但是单一的、频繁的更新的话，虚拟DOM将会花费更多的时间处理计算的工作。所以如果你有一个DOM节点相对较少页面，用虚拟DOM，它实际上有可能会更慢，但对于大多数单页面应用，这应该都会更快。