虚拟dom深入理解 | vue
【什么是Virtual DOM】
Virtual DOM(虚拟DOM)，在形态上表现为一个能够描述DOM结构及其属性信息的普通的JS对象，因为不是真实的DOM对象，所以叫虚拟DOM。
<div></div>{sel: 'div',data: {},chidren:undefined,elm:undefined,key:undefined,}
Virtual DOM 本质上JS和DOM之间的一个映射缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。
【为什么需要Virtual DOM】
手动操作DOM比较麻烦，还需要考虑浏览器兼容性问题，虽然有jquery等库简化DOM操作，但是随着项目的复杂DOM操作复杂提升。
为了简化DOM的复杂操作于是出现了MVVM框架，MVVM框架解决了视图和状态的同步问题。
为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题,于是Virtual DOM出现了。
Virtual DOM的好处是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部将弄清除如何有效(diff)的更新DOM。
虚拟DOM可以维护程序的状态，跟踪上一次的状态，通过比较前后两次状态的差异更新真实DOM。
【Virtual DOM的作用】
1、减少对真实DOM的操作
真实DOM 因为浏览器厂商需要实现众多的规范（各种 HTML5 属性、DOM事件），即使创建一个空的 div 也要付出昂贵的代价。如以下代码，打印空的div属性一共298个。而这仅仅是第一层。真正的 DOM 元素非常庞大。直接操作DOM可能会导致频繁的回流和重绘。
const div = document.createElement('div');const arr = [];for(key in div){arr.push(key)};console.log(arr.length); // 298
对复杂的文档DOM结构（复杂视图情况下提升渲染性能），提供一种方便的工具，进行最小化地DOM操作。既然我们可以用JS对象表示DOM结构，那么当数据状态发生变化而需要改变DOM结构时，我们先通过JS对象表示的虚拟DOM计算出实际DOM需要做的最小变动（Virtual DOM会使用diff算法计算出如果有效的更新dom，只更新状态改变的DOM），然后再操作实际DOM，从而避免了粗放式的DOM操作带来的性能问题，减少对真实DOM的操作。
2、无需手动操作 DOM，维护视图和状态的关系
我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，MVVM框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
3、跨平台
虚拟DOM是对真实的渲染内容的一层抽象，是真实DOM的描述，因此，它可以实现“一次编码，多端运行”，可以实现SSR(Nuxt.js/Next.js)、原生应用(Weex/React Native)、小程序(mpvue/uni-app)等。
【Virtual DOM有什么不足】
上面我们也说到了在复杂视图情况下提升渲染性能。虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟DOM 无法进行针对性的极致优化。首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。
下方是尤大自己的见解。www.zhihu.com/question/31…