开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情
首先是我对虚拟DOM的理解
从本质上来说，VDom是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性的更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。
vue中如何使用的虚拟DOM？
- vue在代码渲染到页面之前，vue会把代码转换成一个对象（虚拟 DOM）。以对象的形式来描述真实DOM结构，最终渲染到页面。
- 在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进行比较。在vue内部封装了diff算法，通过这个算法来进行比较，渲染时修改改变的变化，原先没有发生改变的通过原先的数据进行渲染。
- 这就是diff算法和VDOM的结合。
虚拟DOM真的比真实DOM性能好吗？
我觉得这个不一定。
- 因为首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
- 但它能保证性能下限，在真实DOM操作的时候进行针对性的优化时，只更新与原来不同的虚拟DOM，所以这时候就体现出了虚拟DOM的优势了
为什么要用虚拟DOM ？
（1）保证性能下限
- 我觉得最主要的原因是因为如果我们操作真实DOM，就会引起大量的重排重绘，这样就非常影响性能。
- 下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能消耗
- 真实DOM∶ 生成HTML字符串＋重建所有的DOM元素（可能会发生重排重绘）
- 虚拟DOM∶ 生成vNode+ DOMDiff＋必要的dom更新
（2）跨平台
VDOM本质上是JavaScript的对象，它可以很方便的跨平台操作，比如服务端渲染、uniapp等。
以上呢就是我今天对VDOM做的一个总结，如果有哪里描述的不是很清楚或者不对，路过的小伙伴可以评论补充哦！！！
